Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label

最近刚进行 Vue3 + Element plus 项目实践,在进行表单二次封装的时候,表单元素 select 下拉框组件选中一个选项后显示的是 value 而不是 label,下面上代码:

原来的写法:

<el-selectv-if="v.type === 'select'"v-model="formModel[v.id]":placeholder="v.placeholder"clearable
><el-optionv-for="(item, i) in v.option":value="item.value":key="`${i}${v.value}`">{{item.label}}</el-option>
</el-select>

这样写,选中一个选项 “是” 后,下拉框中显示的一直是 value---1,而不是 label---是,如图:

修改后的写法:

<el-selectv-if="v.type === 'select'"v-model="formModel[v.id]":placeholder="v.placeholder"clearable
><el-optionv-for="(item, i) in v.option":label="item.label":value="item.value":key="`${i}${v.value}`"/>
</el-select>

这样写,选中一个选项 “是” 后,下拉框中显示的是 label---是,而不是 value---1,如图 

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

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

相关文章

SpringBoot2+Vue2开发工作管理系统

项目介绍 在工作中使用的管理系统&#xff0c;可以随手记录一些笔记、可以汇总一些常用网站的链接、可以管理自己负责的项目、可以记录每日日报和查看历史日报、可以记录加班情况、可以记录报销内容、可以编写文章文档。 系统功能 我的笔记快捷入口项目管理今日日报我的日报…

前端的Python入门指南(完):错误和异常处理策略及最佳实践

《前端的 Python 入门指南》系列文章&#xff1a; &#xff08;一&#xff09;&#xff1a;常用语法和关键字对比&#xff08;二&#xff09;&#xff1a;函数的定义、参数、作用域对比&#xff08;三&#xff09;&#xff1a;数据类型对比 - 彻底的一切皆对象实现和包装对象异…

C语言实现八大排序算法

目录 1.插入排序 1.1 直接插入排序 1.2 希尔排序 2. 选择排序 2.1 直接选择排序 2.2 堆排序 *TopK问题&#xff1a; 3. 交换排序 3.1 冒泡排序 3.2 快速排序 1. Hoare版本 2. 挖坑法 3. 前后指针法 4. 快速排序优化 5. 非递归快速排序 4.归并排序 1.递归式归并…

vim save

vim save 在 Vim 中保存文件的方法如下&#xff1a; 1. 保存文件但不退出&#xff1a; 输入命令模式&#xff08;按 Esc 键&#xff09;&#xff0c;然后输入&#xff1a;:w按下回车即可保存文件。 2. 保存并退出&#xff1a; 输入命令模式&#xff08;按 Esc 键&#xff…

SpringCloudAlibaba | Sentinel从基础到进阶

一、Sentinel简介 Sentinel是SpringCloudAlibaba的一个组件&#xff0c;主要用于解决微服务架构中的高可用性和稳定性问题&#xff08;雪崩问题&#xff09;。 常见的使用场景有&#xff1a; 流量控制舱壁模式&#xff08;线程隔离&#xff09;超时处理熔断降级 二、流量控…

【Java】正则表达式基础题+场景题练习

基础语法可以看我另一篇博客&#xff1a;正则表达式【规则】【实例】【技巧】_正则规则-CSDN博客 输出结果全是true public class StringRegexTest {public static void main(String[] args) {System.out.println(matchSingleNum("1"));System.out.println(matchMul…

《开源时间序列数据:探索与应用》

《开源时间序列数据&#xff1a;探索与应用》 一、开源时间序列数据概述二、热门的开源时间序列数据库1. InfluxDB2. TimescaleDB3. Prometheus4. OpenTSDB5. Graphite6. Druid 三、开源时间序列数据的应用场景1. 物联网领域2. 金融领域3. 运维监控领域4. 能源领域 四、开源时间…

51c嵌入式~单片机~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/12362395 一、STM32代码远程升级之IAP编程 IAP是什么 有时项目上需要远程升级单片机程序&#xff0c;此时需要接触到IAP编程。 IAP即为In Application Programming&#xff0c;解释为在应用中编程&#xff0c;用户自己的…

Spring Boot 集成 Elasticsearch怎样在不启动es的情况下正常启动服务

解释 在spingboot 集成es客户端后&#xff0c;每当服务启动时&#xff0c;服务默认都会查看es中是否已经创建了对应的索引&#xff0c;如果没有索引则创建。基于上面的规则我们可以通过配置不自动创建索引来达到在没有es服务的情况下正常启动服务。 解决办法 在entity类的Docu…

Linux在Ubuntu系统下安装MySQL数据库(全网最详细)

1.在ubuntu下安装MySQL数据库 第一步要先&#xff1a;切换到root用户 以我自己的为例&#xff08;自行输入密码&#xff09; ljwVM-16-16-ubuntu:~$ su - 1.1 查看操作系统版本 rootVM-16-16-ubuntu:~# lsb_release -a 1.2 添加MySQL APT源 1.2.1 访问下载⻚⾯并下载发布包…

ThreadLocal数据结构、内存泄漏分析

文章目录 ⚽ThreadLocal&#x1f389;入门案例&#x1f388;ThreadLocal在线程中怎么存储的&#x1f397;为什么会造成内存泄漏&#xff1f;&#x1f383;ThreadLocalMap的key使用强引用和弱引用有什么区别呢&#xff1f;&#x1f514;补充说明Java中引用类型分类内存泄漏和内存…

vs code 2024编译环境问题记录

之前vs code环境配置了好一会&#xff0c;现在将遇到的问题记录一下&#xff0c;并贴上解决方法。 在这之前&#xff0c;关键的gcc编译器竟然在Python生成exe的过程中不小心下载了Mingw64&#xff0c;然后导致gcc编译器已经安装好在某个目录下了 命令行查看发现&#xff0c;原…

linux网络编程 | c | epoll实现IO多路转接服务器

epoll实现IO多路转接服务器 可通过以下视频学习 06-opell函数实现的多路IO转接_哔哩哔哩_bilibili 通过响应式–多路IO转接实现 文章目录 epoll实现IO多路转接服务器1.思路&功能核心思路 2.代码实现multi_epoll_sever.c运行图 1.思路&功能 **功能&#xff1a;**客…

植物大战僵尸辅助【控制台版本】

前面介绍了使用CE和OD的简单使用&#xff1a;CE和OD介绍和使用CE查找阳光的教学&#xff1a;阳光基地址和偏移地址&#xff0c;下面先使用最简单的控制台程序来实现修改阳光的功能。 项目地址 1.分析程序 我们的控制台程序想要修改植物大战僵尸游戏内的数据&#xff0c;它们…

elasticsearch 使用Painless脚本

文章目录 1. 创建索引2. 插入模拟数据Painless 脚本的基本特点&#xff1a;Painless 脚本的常见用途1. 脚本查询和过滤示例&#xff1a;基于脚本的查询 2. 脚本字段示例&#xff1a;脚本字段 3. 聚合中的脚本示例&#xff1a;脚本聚合 4. 文档更新中的脚本示例&#xff1a;文档…

【Elasticsearch】高亮搜索:从原理到Web呈现

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

短视频矩阵源代码部署过程中可能遇到的常见问题及其概述

技术选型挑战 前端技术栈&#xff1a;不恰当的选择可能导致界面响应迟缓、用户交互体验不佳。例如&#xff0c;HTML、CSS、JavaScript等前端技术的运用不当&#xff0c;会影响页面的渲染速度和交互流畅性。 后端技术&#xff1a;后端开发语言的选择若与项目需求不匹配&#xff…

15.初始接口1.0 C#

这是一个用于实验接口的代码 适合初认识接口的人 【CSDN开头介绍】&#xff08;文心一言AI生成&#xff09; 在C#编程世界中&#xff0c;接口&#xff08;Interface&#xff09;扮演着至关重要的角色&#xff0c;它定义了一组方法&#xff0c;但不提供这些方法的实现。接口作为…

什么是正则化?Regularization: The Stabilizer of Machine Learning Models(中英双语)

正则化&#xff1a;机器学习模型的稳定器 1. 什么是正则化&#xff1f; 正则化&#xff08;Regularization&#xff09;是一种在机器学习模型训练中&#xff0c;通过约束模型复杂性以防止过拟合的技术。 它的核心目标是让模型不仅在训练集上表现良好&#xff0c;还能在测试集上…

Day9 神经网络的偏导数基础

多变量函数与神经网络 在神经网络中&#xff0c;我们经常遇到多变量函数。这些函数通常描述了网络的输入、权重、偏置与输出之间的关系。例如&#xff0c;一个简单的神经元输出可以表示为&#xff1a; z f ( w 1 x 1 w 2 x 2 … w n x n b ) z f(w_1x_1 w_2x_2 \ldots…