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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【深入探索 C++ STL 双端队列 】deque —— 数据时空的双端虫洞,扭曲常规操作的效率边界

STL系列专栏&#xff1a; C STL系列__Zwy的博客-CSDN博客https://blog.csdn.net/bite_zwy/category_12838593.html?spm1001.2014.3001.5482学习C STL的三个境界&#xff0c;会用&#xff0c;明理&#xff0c;能扩展&#xff0c;STL中的所有容器都遵循这个规律&#xff0c;下面…

DevOps系统设计和技术选型

命名是一件痛苦的事情&#xff0c;除非你不想要一个好名字。 我正在做的这个管理系统叫什么合适&#xff0c;或者是什么类型的系统&#xff0c;想去想来不知所措&#xff0c;后来想想这么小的东西纠结什么&#xff0c;先从小的细节一点点来&#xff0c;能用就行&#xff0c;就用…

20241206-Windows 10下使用IDEA 2024.2.3(JDK 18.0.2.1)搭建Hadoop 3.3.6开发环境

Windows 10下使用IDEA 2024.2.3(JDK 18.0.2.1)搭建Hadoop 3.3.6开发环境 1. 配置好本地hadoop之后 2. idea 新建或导入 Maven 项目 3. 编写 pom.xml 文件: 有些版本和项目信息需要根据自己的项目进行调整 JDK 18.0.2.1 Hadoop 3.3.6 <?xml version"1.0" encod…

C#Treeview

创建一个Windows应用程序&#xff0c;在默认窗体中添加一个TreeView控件、一个ImageList控件和一个ContextMenuStrip控件&#xff0c;其中&#xff0c;TreeView控件用来显示部门结构&#xff0c;ImageList控件用来存储TreeView控件中用到的图片文件&#xff0c;ContextMenuStri…

pytorch多GPU训练教程

pytorch多GPU训练教程 文章目录 pytorch多GPU训练教程1. Torch 的两种并行化模型封装1.1 DataParallel1.2 DistributedDataParallel 2. 多GPU训练的三种架构组织方式2.2 数据不拆分&#xff0c;模型拆分&#xff08;Model Parallelism&#xff09;2.3 数据拆分&#xff0c;模型…

使用el-row和el-col混合table设计栅格化,实现表头自适应宽度,表格高度占位

演示效果&#xff1a; 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果&#xff1a; 代码分析: 上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16 下面混合table实现&#xff0c;并使用border来自适应宽度…

WPS解决Word文件引入excel对象文件无法打开提示“不能启动此对象...”的问题

一、问题现象 接收到了一份 Word文件&#xff0c;里面引入了一个Excel对象文件&#xff0c;双击时候&#xff0c;wps出现卡顿&#xff0c;过一会之后弹出错误提示&#xff1a;不能启动此对象... 二、解决方法 1.点击WPS左上角图标&#xff0c;并打开右上角设置&#xff0c;萱蕚…

JAVA (Springboot) i18n国际化语言配置

JAVA i18n国际化语言配置 一、简介二、功能三、Java配置国际化步骤四、Java国际化配置工具类五、Spring Boot配置六、测试 一、简介 在Java中&#xff0c;国际化&#xff08;Internationalization&#xff0c;通常简称为i18n&#xff09;是一个过程&#xff0c;它允许应用程…

Jenkins 中自定义Build History中显示构建信息

有时候会遇到一个代码仓库下面会有多个不同的分支&#xff0c;而这写分支表示着不同的开发者在开发新的需求&#xff0c;但是这样就会出现一个问题&#xff0c;在Jenkins上进行多分支构建的时候&#xff0c;很难找到哪一个是属于自己分支构建的&#xff0c;这样的问题大家应该都…

springboot安康旅游网站的设计与实现(代码+数据库+LW)

目 录 目 录 摘 要 Abstract 第一章 绪论 1.1 研究现状 1.2 设计原则 1.3 研究内容 第二章 相关技术简介 2.1 JSP技术 2.2 Java技术 2.3 MYSQL数据库 2.4 B/S结构 2.5 Spring Boot框架 第三章 系统分析 3.1可行性分析 3.1.1技术可行性 …

asp.net core过滤器应用

筛选器类型 授权筛选器 授权过滤器是过滤器管道的第一个被执行的过滤器&#xff0c;用于系统授权。一般不会编写自定义的授权过滤器&#xff0c;而是配置授权策略或编写自定义授权策略。简单举个例子。 using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCo…

深入体验c语言中const的多种多样的用法

const是一个C语言&#xff08;ANSI C&#xff09;的关键字&#xff0c;它限定一个变量不允许被改变&#xff0c;一定程序上提高程序的安全性和可靠性。虽然这个关键字看起来简单&#xff0c;但是实际上随着它限定位置不一样&#xff0c;产生的效果也各异。 一、const作用 cons…

齐护机器人ModbusRTU RS485转TTL通信模块与ESP32 Arduino通信可Mixly的图形化编程Scratch图形化编程

齐护机器人ModbusRTU RS485-TTL通信模块 一、概念理解 Modbus协议是一种由Modicon公司&#xff08;现为施耐德电气Schneider Electric&#xff09;于1979年发表的网络通信协议&#xff0c;旨在实现可编辑逻辑控制器&#xff08;PLC&#xff09;之间的通信。 1.1 什么是Mod…

【动手学运动规划】 4.5 A*算法

我宁愿永远做我自己&#xff0c;也不愿成为别人&#xff0c;即使那个人比你更快乐。 —《成为简奥斯汀》 &#x1f3f0;代码及环境配置&#xff1a;请参考 环境配置和代码运行! 4.5.1 概述 Dijkstra算法是基于广度优先搜索策略来遍历空间内的所有节点&#xff0c;最终计算出…

一些引入依赖,提示引入方式报错的问题

背景 当我们使用gulp自动化处理文件的时候&#xff0c;难免会遇到需要按照一定条件过滤的需求&#xff0c;这里博主所遇到问题是&#xff0c;通过文件内容中是否包含 某一串字符串 决定过滤当前的文件 比如&#xff1a; 碰到文件中包含注释 * replace-note 此文件未被引用 ,那…

十二月第二周

作业题&#xff1a; 嵌套循环穷举&#xff0c;先看一道题也是今天作业题&#xff1a; 重点掌握题&#xff1a; 接下来&#xff0c;我们看一下未来要学习的内容&#xff1a;数组 数组基本用法如下&#xff1a; 扩展题&#xff1a;

PyTorch环境迁移指南

在进行深度学习研究和开发时,我们经常需要在不同计算机之间迁移PyTorch环境。无论是更换新设备还是在多台机器间协同工作,都需要确保环境配置的一致性。本文将详细介绍PyTorch环境迁移的完整流程和注意事项。 环境迁移看似简单,实则暗藏玄机。直接复制文件可能会遇到系统差异带…

QGroundControl之4-QGCCorePlugin.cc

介绍 核心控件接口 Core Plugin Interface for QGroundControl 。主要看settingsPages、analyzePages、instrumentPages 等&#xff0c;这里明显看出配置了不同类型toolbar按钮对应的页面 1.MainRootWindow.qml MainRootWindow.qml页面中使用 AppSettings.qml 2.AppSettings.…

tomcat 运行加载机制解析

tomcat 运行加载机制 从tomcat jar包的加载顺序&#xff1a; tomcat的具体运行加载 可以从 start、setclasspath、catalina文件中看出来&#xff1a; start.bat执行 去找bin目录下的catalina.bat,catalina 或去找 bin\setenv.bat以获取标准环境变量&#xff0c;然后去找bin\…

【机器学习 | 基于Lasso回归和随机森林的上海链家二手房房价预测】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 去除重复数据2.4 去除缺失数据2.5 面积、价格、单价、楼层、建筑时间数据提取2.6 朝向数据处理 &#x1f3f3;️‍&#x1f308; 3. 特…