若依 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.rhkb.cn/news/485487.html

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

相关文章

【0x01】HCI_Inquiry_Complete事件详解

目录 一、事件概述 二、事件格式及参数 2.1. HCI_Inquiry_Complete事件格式 2.2. 参数 三、HCI_Inquiry_Complete事件触发机制 3.1. 基于查询命令完成的触发 3.2. 受查询环境和设备状态影响的触发 3.3. 与蓝牙协议栈内部逻辑相关的触发 四、事件处理流程 4.1. 事件接…

【Linux系统编程】——Linux操作系统的魔法桥梁:从命令行到内核的奇遇记

文章目录 Linux操作系统的概念&#xff08;是什么&#xff1f;&#xff09;设计操作系统的目的(为什么&#xff1f;)核心功能(怎么办&#xff1f;)如何理解“管理”——软硬件的管理硬件管理软件管理 系统调⽤和库函数概念系统调用&#xff08;System Call&#xff09;库函数&a…

VBA基础2

VBA基础2 sub过程语法对单元格进行赋值操作连续赋值不连续赋值 cells &#xff08;行&#xff0c;列&#xff09;行引用rows列引用 &#xff08;columns&#xff09;offset位移属性End属性&#xff08;指定返回&#xff09; 使用VBA编辑器需要用AltF11打开 或者VB编辑器打开 可…

支持win7系统的onnxruntime

在win7 X86系统上&#xff0c;使用了onnxruntime.dll库做AI识别&#xff0c;但是在win7上运行报0xc0000005的错误 经查&#xff0c;ONNX Runtime从v1.15.0版本开始不再支持Windows 7及其之前的操作系统&#xff0c;即便尝试重新编译源代码亦无法在这些老系统上运行&#xff0c;…

【服务器监控】grafana+Prometheus+node exporter详细部署文档

我们在进行测试时&#xff0c;不可能一直手动看着服务器的性能消耗&#xff0c;这时候就需要有个工具替我们监控服务器的性能消耗。这里记录下grafanaPrometheusnodeExporter的组合用于监控服务器。 简单介绍&#xff1a; grafana&#xff1a;看板工具&#xff0c;所有采集的…

【密码学】分组密码的工作模式

1.电码本模式&#xff08;ECB&#xff09; 优点: 每个数据块独立加密&#xff0c;可并行加密&#xff0c;实现简单。 缺点: 相同明文会产生相同密文&#xff0c;不具备数据完整保护性。 适用于短消息的加密传输 (如一个加密密钥)。 工作流程&#xff1a;用相同的密钥分别对…

PR时间轴

简介 时间轴记录整个项目所发生的一切&#xff0c;它包括视频轨道、音频轨道、字幕轨道&#xff0c;可以队单独的任意轨道进行编辑。 时间轴上还可以使用编辑点对素材进行简单编辑&#xff0c;也可以锁定轨道保证素材不会被其他操作改变。 播放指示器&#xff08;指针&#x…

【RBF SBN READ】hadoop社区基于RBF的SBN READ请求流转

读写分离功能的背景及架构 当前联邦生产集群的各个子集群只有Active NameNode在工作,当读写任务变得繁忙的时候,只有一个Active负责处理的话,此时集群的响应和处理能力业务侧感知会明显下降,为此,我们将引入Observer架构,实现读写功能的分离,使得Active只负责写请求,而…

记事本建java及java命名规范

1.桌面开发&#xff1a;c# 2. 记事本建java&#xff1a; 以class的名称(类名)为名&#xff0c;名称.java 编译jdk&#xff1a;javac 名称.java 调动运行jre : java 名称 查看名称.java里面的内容&#xff1a;cat 名称.java java 的命名规范 大驼峰&#xff08;每个单词首…

YOLOv8模型改进 第二十讲 添加三重注意力机制Triplet Attention 提升小目标/遮挡目标

本文这次分享的是三重注意力机制Triplet Attention。现在注意力机制在计算机视觉任务中被广泛研究和应用&#xff0c;如 Squeeze-and-Excitation Networks (SENet)、Convolutional Block Attention Module (CBAM) 等。然而&#xff0c;这些方法存在一些局限性&#xff0c;例如需…

2024年认证杯SPSSPRO杯数学建模D题(第一阶段)AI绘画带来的挑战解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 D题 AI绘画带来的挑战 原题再现&#xff1a; 2023 年开年&#xff0c;ChatGPT 作为一款聊天型AI工具&#xff0c;成为了超越疫情的热门词条&#xff1b;而在AI的另一个分支——绘图领域&#xff0c;一款名为Midjourney&#xff08;MJ&#xff…

如何修复和防止 500 内部服务器错误的发生

当遭遇 500 内部错误时&#xff0c;意味着服务器出现了意外状况&#xff0c;以至于无法对请求予以回应。这种错误往往源于服务器端的各类问题&#xff0c;像是服务器配置出现偏差、脚本存在漏洞或者服务器瞬间负荷过重等。在不少情形下&#xff0c;服务器管理员能够化解此难题&…

算法刷题Day11: BM33 二叉树的镜像

点击题目链接 思路 转换为子问题&#xff1a;左右子树相反转。遍历手法&#xff1a;后序遍历 代码 class Solution:def Transverse(self,root: TreeNode):if root None:return rootnewleft self.Transverse(root.left)newright self.Transverse(root.right)# 对root节点…

【项目】基于YOLOv10的目标检测项目

【项目】基于YOLOv10的目标检测项目 &#xff08;一&#xff09;模型性能&#xff08;二&#xff09;安装与使用&#xff08;1&#xff09;环境安装&#xff08;2&#xff09;快速使用&#xff08;3&#xff09;模型评估Validation&#xff08;4&#xff09;模型训练Training&a…

与火山引擎合作深化,观测云携一站式监控解决方案登陆万有商城

近日&#xff0c;观测云正式宣布入驻火山引擎的万有商城。作为一款全栈式数据观测与分析平台&#xff0c;观测云的加入不仅丰富了火山引擎生态&#xff0c;也为广大企业用户带来了更便捷的数字化工具&#xff0c;助力企业快速实现业务监控与优化。 从全球覆盖到本地深耕&#x…

计算机网络原理之HTTP与HTTPS

一、前言 为了理解HTTP&#xff0c;我们有必要事先了解一下TCP/IP协议簇。 通常我们使用的网络&#xff08;包括互联网&#xff09;是在TCP/IP协议簇的基础上运作的。而HTTP属于它内部的一个子集。 计算机与网络设备要相互通信&#xff0c;双方必须基于相同的方法。比如&#…

java注解(二):注解的解析以及应用场景、用注解和反射模拟junit框架代码演示

目录 1、什么是注解的解析&#xff1f; 2、解析注解的案例 1、自定义一个注解 2、在类和方法上使用自己定义的注解 3、解析注解 3、模拟Junit框架案例 1、自定义一个MyTest注解 2、定义一个测试类&#xff0c;使用自定义的注解 3、写一个启动类 本文章主要讲解什么是注…

15.三数之和

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 1&am…

03_Webpack模块打包工具

03_Webpack模块打包工具 目录 知识点自测 以下哪个选项是 ECMAScript 默认导出和导入的语法&#xff1f; A&#xff1a;export 和 require B&#xff1a;module.exports {} 和 import 变量名 C&#xff1a;export default 和 import 变量名 D&#xff1a;export 和 import {…

实验七 用 MATLAB 设计 FIR 数字滤波器

实验目的 加深对窗函数法设计 FIR 数字滤波器的基本原理的理解。 学习用 Matlab 语言的窗函数法编写设计 FIR 数字滤波器的程序。 了解 Matlab 语言有关窗函数法设计 FIR 数字滤波器的常用函数用法。 掌握 FIR 滤波器的快速卷积实现原理。 不同滤波器的设计方法具有不同的优…