若依 ruoyi VUE el-select 直接获取 选择option 的 label和value

1、最新在研究若依这个项目,我使用的是前后端分离的方案,RuoYi-Vue-fast(后端)+ RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便,这个项目运行起来很方便,但是需要自定义的时候,因为我不懂前端,所以遇到很多问题。之后我会把遇到的问题都放在这个文章里面。记录一下。
2、先记录一下VUE页面的一个小修改,实现的功能就是在列表页面,点击新增,弹出的页面可以填写所有信息,新增到数据库。点击数据后面的修改,指定的字段不可编辑,不可用。

我想要实现的效果其实就是在列表里面对关键信息进行打码,这个打码需要从查询数据库或者后端进行数据打码,放在前端打码,抓一下网络请求就可以看到这个要注意。

用户点击数据后面的修改,关键信息就不可编辑,只能编辑其他信息。

这块也需要注意一下,当点击确定的时候,不可编辑的字段会带着星号传递到后台,注意将带星号的字段设置为null,避免修改到数据内真实数据。

实现这个功能很简单,代码如下

 <el-form-item label="xxx" prop="xxxx"><el-input v-model="form.xxx" placeholder="请输入xxx" :readonly="!isEditable" :disabled="!isEditable" /></el-form-item>

需要定义一个isEditable,当点击新增时候设置为false,当点击修改的时候设置为true

 /** 新增按钮操作 */handleAdd() {other-code--------------------this.isEditable = true;},/** 修改按钮操作 */handleUpdate(row) {other-code--------------------this.isEditable = true;},

不太懂VUE,只是按着自己想法来做,确实实现了功能,如果有其他更好的方法,欢迎大家指导。

3、VUE el-select 使用 ref 直接获取选中的 option对象,然后直接获取label和value
<el-select v-model="form.xxx" ref="optionRef" placeholder="请选择xxx" @change="handleChange"><el-option label="xxxxx" value="1"></el-option><el-option label="xxxx" value="2"></el-option><el-option label="xxxx" value="3"></el-option>
</el-select>handleChange(){this.form.xxx=this.form.xxx;this.form.xxxlabel= this.$refs.optionRef.getOption(this.form.xxx).label; },

这里面插一句,如果你想把某个页面中的表格内容做成select,只需要抓取一下这个页面的返回值,然后拿到返回值之后,交给AI,让AI自动处理,返回带有标签的代码就可以了。我就是通过这种方法将一个页面的表格做成了我想要的select,还可以根据你的需要排序分类什么的。巨好用。

ref这种方式也是我查询到的,实现了我想要的功能,如果有更好的方法,欢迎大家指导。

4、有空写一下关于若依代码生成那块,勾选了字段,但是字段没有在页面显示的问题,是因为升成代码那块模板文件的事情。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于队列(Queue)的部分笔试题

1. 设计一个循环队列&#xff08;环形队列&#xff09; 问题描述&#xff1a; 设计一个支持以下操作的队列&#xff1a; enqueue(int x)&#xff1a;将元素 x 添加到队尾。 dequeue()&#xff1a;移除并返回队头元素。 peek()&#xff1a;返回队头元素&#xff0c;但不移除它…

springboot事务手动回滚报错

捕捉异常之后手动标记回滚事务 TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); 没有嵌套事务&#xff0c;还是报Transaction rolled back because it has been marked as rollback-only异常错误 查看错误堆栈&#xff0c;service调用的方法外层还套…

Pytorch使用手册- TorchVision目标检测微调Tutorial的使用指南(专题十二)

这篇教程的目标是对一个预训练的 Mask R-CNN 模型进行微调,应用于 Penn-Fudan 行人检测与分割数据集。该数据集包含 170 张图像,里面有 345 个行人实例,我们将通过这个教程来演示如何使用 torchvision 中的新特性,训练一个面向自定义数据集的目标检测和实例分割模型。 注意…

使用 LlamaFactory 结合开源大语言模型实现文本分类:从数据集构建到 LoRA 微调与推理评估

文章目录 背景介绍文本分类数据集Lora 微调模型部署与推理期待模型的输出结果 文本分类评估代码 背景介绍 本文将一步一步地&#xff0c;介绍如何使用llamafactory框架利用开源大语言模型完成文本分类的实验&#xff0c;以 LoRA微调 qwen/Qwen2.5-7B-Instruct 为例。 文本分类…

发论文参考文献部分怎么注明数据集出处gitee

见的参考文献标注格式&#xff08;如APA、MLA、Chicago等&#xff09;&#xff0c;电子文献或网络资源的标注通常包括作者&#xff08;或组织&#xff09;、标题、发布年份、获取路径&#xff08;URL&#xff09;等信息。 二、具体步骤 查找数据集信息&#xff1a; 在Gitee上找…

ARM内核与单片机

1.单片机硬件架构如下所示&#xff1a;各种硬件通过总线进行连接。 2.M4内核架构 3.单片机如何工作&#xff1a; 4.CPU是通过读写寄存器来控制GPIO的 5.GPIO的硬件框架&#xff1a;一共有8种模式 &#xff08;1&#xff09;推挽/推挽复用输出。下图先看图1&#xff0c;如果输入…

vue3:mitt

在 Vue 3 中使用 mitt 进行事件总线的实现非常简单。mitt 是一个轻量级的事件库&#xff0c;适用于 Vue 项目中的组件间通信。 实现自定义组件直接相互传值&#xff0c;父到子&#xff0c;子到子&#xff0c;子对子&#xff0c;子对孙&#xff0c;想怎么传就怎么传。和android…

PHP 命令执行漏洞学习记录

PHP 命令执行 命令函数 作用 例子 system() 执行外部程序,并且显示输出 system(whoami) exec() 执行一个外部程序 echo exec(whoami); shell_exec() 通过shell环境执行命令,并且将完整的输出以字符串的形式返回 echo shell_exec(whoami); passthru() 执行外部程序…

VSCode GDB远程嵌入开发板调试

VSCode GDB远程嵌入式开发板调试 一、原理 嵌入式系统中一般在 PC端运行 gdb工具&#xff0c;源码也是在 PC端&#xff0c;源码对应的可执行文件放到开发板中运行。为此我们需要在开发板中运行 gdbserver&#xff0c;通过网络与 PC端的 gdb进行通信。因此要想在 PC上通过 gdb…

【机器学习】机器学习的基本分类-无监督学习(Unsupervised Learning)

无监督学习&#xff08;Unsupervised Learning&#xff09; 无监督学习是一种机器学习方法&#xff0c;主要用于没有标签的数据集。其目标是从数据中挖掘出潜在的结构和模式。常见的无监督学习任务包括 聚类、降维、密度估计 和 异常检测。 1. 无监督学习的核心目标 1.1 聚类…

【Python]深入Python日志管理:从logging到分布式日志追踪的完整指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 日志是软件开发中的核心部分,尤其在分布式系统中,日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发,逐步探讨日志管理的最佳实践,涵盖日志配置、日志分层、日志格式化等基…

专业140+总分420+上海交通大学819考研经验上交电子信息与通信工程,真题,大纲,参考书。博睿泽信息通信考研论坛,信息通信考研Jenny

考研结束&#xff0c;专业819信号系统与信号处理140&#xff0c;总分420&#xff0c;终于梦圆交大&#xff0c;高考时敢都不敢想目标&#xff0c;现在已经成为现实&#xff0c;考研后劲很大&#xff0c;这一年的复习经历&#xff0c;还是历历在目&#xff0c;整理一下&#xff…

【NLP修炼系列之Bert】Bert多分类多标签文本分类实战(附源码下载)

引言 今天我们就要用Bert做项目实战&#xff0c;实现文本多分类任务和我在实际公司业务中的多标签文本分类任务。通过本篇文章&#xff0c;可以让想实际入手Bert的NLP学习者迅速上手Bert实战项目。 1 项目介绍 本文是Bert文本多分类和多标签文本分类实战&#xff0c;其中多分…

[Redis#17] 主从复制 | 拓扑结构 | 复制原理 | 数据同步 | psync

目录 主从模式 主从复制作用 建立主从复制 主节点信息 从节点信息 断开主从复制关系 主从拓扑结构 主从复制原理 1. 复制过程 2. 数据同步&#xff08;PSYNC&#xff09; 3. 三种复制方式 一、全量复制 二、部分复制 三、实时复制 四、主从复制模式存在的问题 在…

【青牛科技】拥有两个独立的、高增益、内部相位补偿的双运算放大器,可适用于单电源或双电源工作——D4558

概述&#xff1a; D4558内部包括有两个独立的、高增益、内部相位补偿的双运算放大器&#xff0c;可适用于单电源或双电源工作。该电路具有电压增益高、噪声低等特点。主要应用于音频信号放大&#xff0c;有源滤波器等场合。 D4558采用DIP8、SOP8的封装形式 主要特点&#xff…

泰坦军团品牌焕新:LOGO变更开启电竞细分市场新篇章

深圳世纪创新显示电子有限公司旗下的高端电竞显示器品牌泰坦军团&#xff0c;上月发布通告&#xff0c;自2024年6月起已陆续进行品牌升级和LOGO变更。 泰坦军团自2015年成立以来&#xff0c;凭借先进的技术和顶级的工业设计&#xff0c;已成为众多年轻人首选的游戏显示器品牌&…

HALCON 算子 之 阈值分割算子

文章目录 什么是阈值分割&#xff1f;为什么要阈值分割&#xff1f;如何进行阈值分割&#xff1f;全局threshold —— 全局固定阈值分割auto_threshold —— 全局自动阈值分割fast_threshold —— 快速全局阈值分割watersheds_threshold —— 分水岭盆地阈值分割 局部dyn_thres…

【代码随想录|贪心算法重叠区间问题】

452.用最少数量的箭引爆气球 题目链接452. 用最少数量的箭引爆气球 - 力扣&#xff08;LeetCode&#xff09; 这道题是要求从下往上穿箭&#xff0c;把所有气球扎爆要的最少箭的数量 思路就是我们比较这个气球和上一个气球有没有重合的&#xff0c;重合我们一根箭一起就射了…

鸿蒙获取 APP 信息及手机信息

前言&#xff1a;获取 APP 版本信息可以通过 bundleManager.getBundleInfoForSelfSync(bundleFlags) 去获取&#xff0c;获取手机信息可以通过 kit.BasicServicesKit 库去获取&#xff0c;以下是封装好的工具类。 import bundleManager from ohos.bundle.bundleManager; impo…

爬取的数据能实时更新吗?

在当今数字化时代&#xff0c;实时数据更新对于企业和个人都至关重要。无论是市场分析、商品类目监控还是其他需要实时数据的应用场景&#xff0c;爬虫技术都能提供有效的解决方案。本文将探讨如何利用PHP爬虫实现数据的实时更新&#xff0c;并提供相应的代码示例。 1. 实时数…