当前位置: 首页 > news >正文

若依 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.lryc.cn/news/500168.html

相关文章:

  • 大数据-155 Apache Druid 架构与原理详解 数据存储 索引服务 压缩机制
  • 修改MySQL存储路径
  • Git常用的命令【提交与回退】
  • 详解:HTTP/HTTPS协议
  • 0.96寸OLED---STM32
  • 保姆级教学 uniapp绘制二维码海报并保存至相册,真机正常展示图片二维码
  • 常用Vim操作
  • 【C#】NET 9中LINQ的新特性-CountBy
  • Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】
  • 【数据结构】文件和外部排序
  • 新手学习:网页前端、后端、服务器Tomcat和数据库的基本介绍
  • 机器学习贝叶斯模型原理
  • 【C++】实现100以内素数的求解
  • Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!
  • Rust学习笔记_13——枚举
  • Postgresql 格式转换笔记整理
  • AI开发:卷积神经网络CNN原理初识,简易例程 - 机器学习
  • 详细介绍vue的递归组件(重要)
  • 【单片机基础知识】基础知识(CortexM系列、STM32系统框架、存储器映射、寄存器映射)
  • yolov5导出命令
  • RabbitMQ的常用术语介绍
  • Docker魔法:用docker run -p轻松开通容器服务大门
  • 【后端面试总结】Redis过期删除策略
  • 数字图像处理(15):图像平移
  • 高级java每日一道面试题-2024年12月08日-JVM篇-什么是类加载器?
  • JAVA子类的无参构造器中第一行的super
  • mysql程序介绍,选项介绍(常用选项,指定选项的方式,特性),命令介绍(查看,部分命令),从sql文件执行sql语句的两种方法
  • Unity教程(十九)战斗系统 受击反馈
  • lanqiaoOJ 3744:小蓝的智慧拼图购物 ← pair+优先队列
  • Spring Boot教程之二十一:文件处理