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

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

news 来源：原创 2025/7/14 15:09:43
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、有空写一下关于若依代码生成那块，勾选了字段，但是字段没有在页面显示的问题，是因为升成代码那块模板文件的事情。

相关文章：

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

1、最新在研究若依这个项目&#xff0c;我使用的是前后端分离的方案&#xff0c;RuoYi-Vue-fast(后端) RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便&#xff0c;这个项目运行起来很方便&#xff0c;但是需要自定义的…...

编程日记 2025/7/14 15:09:43

C++小小复习一下

类&#xff0c;对象&#xff0c;成员变量&#xff0c;成员函数 特点&#xff1a;面向对象程序设计---因为要创建对象来调用类里面的函数或者成员变量 比如你的对象是一个生物-人&#xff1a;他会有自己的一些属性&#xff1a;身高&#xff0c;体重&#xff0c;性别等&#xf…...

编程日记 2025/7/14 13:35:47

JavaWeb学习(4)（四大域、HttpSession原理(面试)、SessionAPI、Session实现验证码功能）

目录 一、web四大域。 &#xff08;1&#xff09;基本介绍。 &#xff08;2&#xff09;RequestScope。(请求域) &#xff08;3&#xff09;SessionScope。(会话域) &#xff08;4&#xff09;ApplicationScope。(应用域) &#xff08;5&#xff09;PageScope。(页面域) 二、Ht…...

编程日记 2025/7/8 5:08:47

quartz 架构详解

‌Quartz是一个开源的作业调度框架&#xff0c;完全由Java编写&#xff0c;主要用于定时任务的调度和管理。Quartz的架构主要包括以下几个核心组件‌&#xff1a; 1.‌调度器&#xff08;Scheduler&#xff09;‌&#xff1a;调度器是Quartz的核心组件&#xff0c;负责管理Qua…...

编程日记 2025/7/14 14:21:51

Redis安装和Python练习（Windows11 + Python3.X + Pycharm社区版)

环境 Windows11 Python3.X Pycharm社区版 思路 1 github下载redis压缩包 &#xff0c;安装并启动redis服务&#xff0c;在Pycharm中运行python程序&#xff0c;连接redis服务&#xff0c;熟悉redis的使用和巩固python语言。 2 python开发环境的搭建参考 https://mp.csdn.…...

编程日记 2025/7/14 13:39:29

明年 iPhone 将搭载苹果自研 5G 基带芯片

明年 iPhone 将搭载苹果自研 5G 基带芯片 据彭博社记者 Mark Gurman 透露&#xff0c;苹果首款自主研发 5G 基带芯片即将面世。 苹果首款自研 5G 基带芯片将命名为「Sinope」&#xff0c;将应用在 2025 年发布的 iPhone SE、iPhone 17 Slim 版以及低端系列的 iPad 系列。「Si…...

编程日记 2025/7/14 13:34:06

1.1 Beginner Level学习之“编写简单的发布服务器和订阅服务器”（第十二节）

学习大纲&#xff1a; 1. 编写发布服务器节点 在ROS中&#xff0c;**节点&#xff08;Node&#xff09;**是与ROS网络通信的基本单位。在这个部分&#xff0c;我们将创建一个简单的发布节点&#xff08;talker&#xff09;&#xff0c;它会不断向话题&#xff08;topic&#x…...

编程日记 2025/7/14 13:41:32

C语言 字符串操作函数

strncpy() 用于将一个字符串的一部分拷贝到另一个字符串中。 char* strncpy(char* destination, const char* source, size_t num);参数&#xff1a;destination 是目标字符串的指针&#xff0c;表示将要拷贝到的位置source 是源字符串的指针&#xff0c;表示要拷贝的字符串num…...

编程日记 2025/7/8 11:09:41

论文概览 |《Cities》2024.07 Vol.150（上）

本次给大家整理的是《Cities》杂志2024年07月第150期的论文的题目和摘要&#xff0c;一共包括90篇SCI论文&#xff01;由于论文过多&#xff0c;我们将通过两篇文章进行介绍&#xff0c;本篇文章介绍第1--第45篇论文! 论文1 Spatiotemporal infection dynamics: Linking indiv…...

编程日记 2025/7/8 9:08:52

查看Windows系统上的Redis服务器是否设置了密码

查看 Redis 配置文件 1.找到 Redis 配置文件&#xff1a; 通常Redis配置文件名为 redis.windows.conf 或 redis.conf&#xff0c;它位于Redis安装目录中。 2.打开配置文件&#xff1a; 使用文本编辑器&#xff08;如Notepad、VS Code等&#xff09;打开该文件。 3.查找 re…...

编程日记 2025/7/13 19:43:44

30天学会Go--第6天 GO语言 RESTful API 学习与实践

30天学会Go–第6天 GO语言 RESTful API 学习与实践 文章目录 30天学会Go--第6天 GO语言 RESTful API 学习与实践一、 RESTful API 的设计原则1.1 RESTful API 的核心概念1.2 RESTful API 的 URL 设计1.3 RESTful API 的数据格式 二、 实现 RESTful API2.1 定义数据模型2.2 实现…...

编程日记 2025/6/30 0:06:02

数据分析特征标准化方法及其Python实现

数据分析特征标准化方法及其Python实现 1、概述 在数据分析中，对特征进行标准化主要是： 1、消除量纲影响 不同特征可能具有不同的量纲和数量级。 例如，一个特征可能是以米为单位的长度，而另一个特征可能是以秒为单位的时间。直接使用这些具有不同量纲的原始数据进行分析…...

编程日记 2025/7/13 1:36:13

【推导过程】常用共轭先验分布

文章目录 相关教程相关文献常用共轭先验分布预备知识贝叶斯统计后验分布的计算 正态均值(方差已知)的共轭先验分布是正态分布二项分布中的成功概率 θ 的共轭先验分布是贝塔分布正态均值(方差已知)的共轭先验分布是倒伽玛分布 作者&#xff1a;小猪快跑 基础数学&计算数学&…...

编程日记 2025/7/14 8:32:40

notepad++安装教程（超详细）

1.下载地址&#xff08;可以私信博主&#xff09; https://notepad-plus.en.softonic.com/download 2.解压安装...

编程日记 2025/6/30 16:59:05

Django快速入门

目录 1 创建django工程2 运行django3 Django工程目录详解4 开始一个app5 CBV和FBV6 使用模板7 使用模板语言8 自定义simple_tag Django 是用 Python 写的一个自由和开放源码 web 应用程序框架。 web框架是一套组件&#xff0c;能帮助你更快、更容易地开发web站点。当你开始构建…...

编程日记 2025/7/11 3:58:30

ISO45001职业健康安全管理体系认证流程

前期准备 领导决策&#xff1a;企业高层领导需认识到实施 ISO 45001 体系的重要性和必要性&#xff0c;做出认证决策&#xff0c;并承诺提供必要的资源支持。成立工作小组&#xff1a;由企业各相关部门人员组成工作小组&#xff0c;明确各成员的职责和分工&#xff0c;确保工作…...

编程日记 2025/7/9 20:45:35

Elasticsearch一分钟

参考 FST有穷状态转换器/咆哮位图/增量缩紧 Es技术难点 架构...

编程日记 2025/7/7 23:28:02

MFC中如何创建一个非模态对话框

对话框是编程中常用的一个控件&#xff0c;非模态对话框与用户交互更加友好&#xff0c;用户不必关闭对话框就能进行其他操作&#xff0c;比如拷贝黏贴&#xff0c;对比数据&#xff0c;执行其他命令。 由于无模态对话经常使用&#xff0c;且用法类似&#xff0c;因此我把它写…...

编程日记 2025/7/5 15:22:42

【设计模式】单例模式 在java中的应用

文章目录 引言什么是单例模式单例模式的应用场景单例模式的优缺点优点缺点 单例模式的基本实现饿汉式单例模式懒汉式单例模式双重检查锁定静态内部类枚举单例 单例模式的线程安全问题多线程环境下的单例模式线程安全的实现方式1. **懒汉式单例模式&#xff08;线程不安全&#…...

编程日记 2025/7/13 23:33:07

北京2024年CSP-S/J 及NOIP游记

北京2024年CSP-S/J 及NOIP游记 2024.9 开学2024.9 CSP-S12024.9 停课2024.10假期 误入歧途2024.10 CSP-S2 冲刺 2024.9 开学 开学升入初三&#xff0c;9月的前半个月一直在搞文化课&#xff08;把文化课搞得风生水起&#xff09;&#xff0c;经历了1天的校运动会&#xff08;摆…...

编程日记 2025/7/10 18:36:18

vue 纯前端对接阿里云oss文件上传封装，支持批量多文件上传，大文件上传时拿到上传进度。

使用阿里云上传先看官方文档&#xff08;阿里云官方文档&#xff09; 我这边只做了简单上传和分片上传&#xff0c;也包含了粘贴上传和拖拽上传。 1.首页先安装 npm i ali-oss2.在utils下创建uploadOss.js const OSS require(ali-oss) import { getOsstoken } from /api/in…...

编程日记 2025/7/14 1:21:57

YOLO系列发展历程：从YOLOv1到YOLO11，目标检测技术的革新与突破

文章目录 前言一、YOLOv1&#xff1a;单阶段目标检测的开端二、YOLOv2&#xff1a;更精准的实时检测三、YOLOv3&#xff1a;阶梯特征融合四、YOLOv4&#xff1a;性能和速度的新平衡五、YOLOv5&#xff1a;易用性和扩展性的加强六、YOLOv6&#xff1a;工业部署的利器七、YOLOv7&…...

编程日记 2025/7/13 19:46:02

认识Java中的异常(半成品)

1.异常的概念与体系结构 1.1在Java中,将程序执行过程中发生的不正常行为称为异常.比如 1.算数异常 public class Main1 {public static void main(String[] args){System.out.println(10/0);} } //异常信息为:Exception in thread "main" java.lang.ArithmeticExc…...

编程日记 2025/7/10 5:35:58

Sqoop 指令语法手册

目录 help指令list-databases参数描述示例 codegen参数描述 Sqoop create-hive-table参数描述 eval参数描述 Export参数描述 import参数描述 import-all-tables参数描述 import-mainframe参数描述 job参数描述 list-tables参数描述 merge参数描述 help指令 sqoop help 下面的S…...

编程日记 2025/7/12 12:20:25

网络安全 - SQL Injection

1.1.1 摘要 日前&#xff0c;国内最大的程序员社区CSDN网站的用户数据库被黑客公开发布&#xff0c;600万用户的登录名及密码被公开泄露&#xff0c;随后又有多家网站的用户密码被流传于网络&#xff0c;连日来引发众多网民对自己账号、密码等互联网信息被盗取的普遍担忧。 网络…...

编程日记 2025/7/14 1:28:35

spi 发送与接收 移位写法

spi _tx 发送模块 片选信号cs可以在top顶层控制模块产生 timescale 1ns / 1psmodule spi_rom#(parameter SIZE 8 )(input wire clk ,input wire rst_n,input wire [SIZE-1:0] data ,input wire …...

编程日记 2025/7/8 6:10:38

MyBatis关联映射

目录 一、什么是关联注解&#xff1f; 二、数据库建表 1.学生表 2.教师表 三、一般查询 &#xff08;1&#xff09;创建StudentTeacher类 &#xff08;2&#xff09;mapper层 &#xff08;3&#xff09;Dao接口 &#xff08;4&#xff09;Test类 &#xff08;5&#x…...

编程日记 2025/7/13 6:22:54

通过华为鲲鹏认证的软件产品如何助力信创产业

软件通过华为鲲鹏认证与信创产业有着密切的联系。鲲鹏认证是华为推动信创产业发展的一项重要举措&#xff0c;通过该认证&#xff0c;软件可以在华为的生态系统中实现更好的兼容性和性能优化&#xff0c;从而推动信创产业的全面发展和国产化替代。 鲲鹏认证的定义和重要性 鲲…...

编程日记 2025/7/10 19:51:43

陈志刚解读：国家数据基础设施建设解读（附下载）

本期分享陈志刚解读&#xff1a;国家数据基础设施建设解读&#xff0c;从背景意图、概念内涵、发展愿景与总体功能、总体架构、重点方向、算力底座、网络支撑、安全防护和组织保障十个方面展开&#xff0c;共52页ppt。 加入星球可获取完整版资料 篇幅限制&#xff0c;部分内容…...

编程日记 2025/7/10 13:51:18

QT 中 sqlite 数据库使用

一、前提 --pro文件添加sql模块QT core gui sql二、使用 说明 --用于与数据库建立连接QSqlDatabase--执行各种sql语句QSqlQuery--提供数据库特定的错误信息QSqlError查看qt支持的驱动 QStringList list QSqlDatabase::drivers();qDebug()<<list;连接 sqlite3 数据库 …...

编程日记 2025/7/13 8:14:45

VPN设备

定义: 虚拟专用网络指的是在公用网络上建立专用网络的技术。之所以称为虚拟网主要是因为整个VPN网络的任意两个节点之间的连接并没 有传统专网所需的端到端的物理链路&#xff0c;而是架构在公用网络服务商所提供的网络平台之上的逻辑网络&#xff0c;用户数据在逻辑链路中传输…...

编程日记 2025/7/13 16:18:54

centos部署SkyWalking并在springcloud项目中用法举例

文章目录 场景SkyWalking介绍部署部署Storage [单机版Elasticsearch]部署SkyWalking OAP [下载地址](https://skywalking.apache.org/downloads/#SkyWalkingAPM)部署SkyWalking Java AgentspringCloud 使用举例 场景 SkyWalking是应用性能监控平台&#xff0c;可用于分布式系统…...

编程日记 2025/7/10 1:49:17

[创业之路-186]：《华为战略管理法-DSTE实战体系》-1-为什么UTStarcom死了，华为却活了，而且越活越好？

目录 前言 一、市场定位与战略选择 二、技术创新能力 三、企业文化与团队建设 四、应对危机的能力 五、客户为中心的理念 六、市场适应性与战略灵活性 七、技术创新与研发投入 八、企业文化与团队建设 九、应对危机的能力 前言 UT斯达康&#xff08;UTStarcom&#…...

编程日记 2025/7/12 18:18:46

算法设计5_分支限界法

分支限界法 分支限界法常以广度优先或以最小耗费(最大效益)优先的方式搜索问题的解空间树&#xff0c;裁剪那些不能得到最优解的子树以提高搜索效率。 步骤&#xff1a; ① 定义解空间(对解编码); ② 确定解空间的树结构&#xff1b; ③ 按BFS等方式搜索&#xff1a; a.每个活…...

编程日记 2025/7/12 10:50:17

【设计模式系列】状态模式（二十三）

一、什么是状态模式 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;其核心目的是管理一个对象在其内部状态改变时的行为变化&#xff0c;其核心理念是将对象的行为和状态分离。这种模式通过将每个状态相关的行为封装在独立的类中&#xff0c;使…...

编程日记 2025/7/12 13:37:41

github创建发布分支

创建一个名为 latest 的分支&#xff0c;并将其作为稳定版本分支。以下是操作步骤&#xff1a; 1. 创建 latest 分支 首先&#xff0c;确保你在 master 分支&#xff08;或当前的稳定版本分支&#xff09;上&#xff0c;并且已经提交了所有更改。然后&#xff0c;你可以创建一…...

编程日记 2025/7/14 10:01:16

【Linux】网络服务

声明&#xff0c;以下内容均学习自《Linux就该这么学》一书 1、创建网络会话 Linux系统使用NetworkManager提供网络服务&#xff0c;它是一种动态管理网络配置的守护进程&#xff0c;能够让网络设备保持连接状态。 nmcli nmcli是一款基于命令行的网络配置工具&#xff0c;它…...

编程日记 2025/7/9 20:49:28

错题：Linux C语言

题目&#xff1a;手写代码&#xff1a;判断一个数&#xff08;int类型的整数&#xff09;中有有多少1 题目&#xff1a;手写代码&#xff1a;判断一个数(转换成二进制表示时)有几个1 #include <stdio.h> int main(int argc, const char *argv[]) { //判断一个数&#xf…...

编程日记 2025/7/12 2:28:43

机器学习期末速成

文章参考自B站机器学习期末速成课 本文仅作者个人复习使用 一、机器学习分类 聚类和分类的区别&#xff1a; 分类&#xff1a;一开始就知道有哪些类别 聚类&#xff1a;一开始不知道有哪些类别 损失函数&#xff1a;简单来说就是你预测出来的结果和真实值的差距。 0-1损失函数…...

编程日记 2025/7/8 23:44:53

【学习总结|DAY015】Java面向对象高级-抽象类、接口

引言 在今天的课程中&#xff0c;我们详细探讨了 Java 编程语言的几个核心特性&#xff1a;多态、final 关键字、抽象类和接口。这些概念是面向对象编程的基础&#xff0c;对于构建健壮、可维护的应用至关重要。本文将通过具体的例子和解释帮助大家更好地掌握这些知识点。 一…...

编程日记 2025/7/9 14:39:10

单词拼写纠正-04-161.力扣 相隔为 1 的编辑距离

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…...

编程日记 2025/7/13 7:20:15

深入理解 NumPy 广播机制：从基础到应用

目录 什么是广播机制&#xff1f;广播机制的规则广播机制示例1. 一维数组与标量运算2. 二维数组与一维数组运算3. 维度不同的数组运算4. 广播失败的情况 广播机制的实际应用场景1. 数据归一化2. 批量计算欧氏距离 总结广播机制的核心要点&#xff1a; 在使用 NumPy 进行数组操作…...

编程日记 2025/7/9 4:00:41

Springboot（五十三）SpringBoot3整合redisson

前边我们有记录Springboot2/3整合redis的方式。是基于Springboot默认集成的Lettuce客户端实现的。 今天我们在项目中集成的redission是在Lettuce之上构建的redis客户端。 Redisson：一个在Jedis和Lettuce之上构建的Redis客户端。提供了一系列分布式Java对象和服务，比如:分布式…...

编程日记 2025/7/13 1:02:06

UAC2.0 speaker——带反馈端点的 USB speaker（16bit 单声道）

UAC2.0 speaker 系列文章 UAC2.0 speaker——单声道 USB speaker（16bit） UAC2.0 speaker——类特殊请求 UAC2.0 speaker——音量控制 UAC2.0 speaker——多采样率支持 UAC2.0 speaker——24/32bit 支持 UAC2.0 speaker——speaker 数据传输 UAC2.0 speaker——同时支持 16bi…...

编程日记 2025/7/12 15:08:52

P2562 [AHOI2002] Kitty猫基因编码

P1498P2562 [AHOI2002] Kitty猫基因编码 #include <iostream> using namespace std; #include <cmath> #include <vector> #include <string> string encode(string str){if(str.find("0") string::npos) return "B";if(str.fin…...

编程日记 2025/7/12 23:00:39

HarmonyOS(65) ArkUI FrameNode详解

Node 1、Node简介2、FrameNode2.1、创建和删除节点2.2、对FrameNode的增删改2.3 FramNode的查询功能3、demo源码4、总结5、参考资料1、Node简介 在HarmonyOS(63) ArkUI 自定义占位组件NodeContainer介绍了自定义节点复用的原理（阅读本本篇博文之前，建议先读读这个），在Node…...

编程日记 2025/7/14 7:53:30

40分钟学 Go 语言高并发：负载均衡与服务治理

负载均衡与服务治理 一、知识要点总览 模块核心内容技术实现难度负载策略轮询、权重、最小连接数自定义负载均衡器中服务降级服务降级、熔断降级、限流降级Hystrix模式高熔断机制熔断器状态机、失败计数、自动恢复Circuit Breaker高限流设计令牌桶、滑动窗口、计数器Rate Lim…...

编程日记 2025/7/10 15:19:01

Python 从入门到实战45（Pandas数据操作）

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;可以熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们学习了pandas数据读写的相关基础知识。今天学习一下…...

编程日记 2025/7/8 4:49:07

node js 历史版本下载

此为node历史版本下载地址 https://nodejs.org/dist/https://nodejs.org/dist/...

编程日记 2025/7/8 10:35:28

无代码探索AI大模型：腾讯云函数计算的卓越实践

在数字化转型的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术已经成为企业提升竞争力的关键。然而&#xff0c;对于许多业务人员来说&#xff0c;技术门槛高、开发周期长等问题限制了他们快速探索和应用AI大模型的能力。同时&#xff0c;对于缺乏GPU资源的开发者来…...

编程日记 2025/7/13 12:25:52