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

server/2024/12/18 16:39:58/

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

原来的写法:

javascript"><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---是,如图:

修改后的写法:

javascript"><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.ppmy.cn/server/151220.html

相关文章

Python实现循环卷积算法

Python实现循环卷积算法 1 基本原理2 程序实现3 运行结果 本文介绍循环卷积算法的基本原理&#xff0c;并使用Python实现循环卷积算法。 1 基本原理 循环卷积的定义式是 y ( k ) ∑ n 0 N − 1 x ( n ) h ( k − n ) ; k 1 , 2... , N − 1 y(k) \sum_{n0}^{N-1}x(n)h(k-…

解决小程序中ios可以正常滚动,而Android失效问题

解决小程序中 iOS 可以正常滚动&#xff0c;而 Android 失效问题 在开发小程序时&#xff0c;我们经常会遇到一些平台兼容性问题。最近&#xff0c;我在开发一个小程序时遇到了一个问题&#xff1a;在 iOS 设备上可以正常滚动加载更多数据&#xff0c;而在 Android 设备上却无…

NVR小程序接入平台/设备EasyNVR深度解析H.265与H.264编码视频接入的区别

随着科技的飞速发展和社会的不断进步&#xff0c;视频压缩编码技术已经成为视频传输和存储中不可或缺的一部分。在众多编码标准中&#xff0c;H.265和H.264是最为重要的两种。今天我们来将深入分析H.265与H.264编码的区别。 一、H.265与H.264编码的区别 1、比特率与分辨率 H.…

计算机网络技术基础:1.计算机网络的产生与发展

从1946年世界上第一台计算机ENIAC的诞生&#xff0c;计算机网络的发展大体可分为以下4个阶段。 一、第一代计算机网络——面向终端的计算机网络 第一代计算机网络也称面向终端的计算机网络&#xff0c;它是以主机为中心的通信系统。这样的系统中&#xff0c;除一台中心计算机&…

游戏引擎学习第52天

仓库 : https://gitee.com/mrxiao_com/2d_game 这节的内容相当多 回顾 在游戏中&#xff0c;实体被分为不同的类别&#xff1a;接近玩家的“高频实体”、距离较远并正在模拟的“低频实体”和不进行更新的“休眠实体”。这些实体会根据它们与玩家的距离进行处理&#xff0c;接…

MongoDB-副本集

一、什么是 MongoDB 副本集&#xff1f; 1.副本集的定义 MongoDB 的副本集&#xff08;Replica Set&#xff09;是一组 MongoDB 服务器实例&#xff0c;它们存储同一数据集的副本&#xff0c;确保数据的高可用性和可靠性。副本集中的每个节点都有相同的数据副本&#xff0c;但…

React好用类名管理小工具:classnames

classnames 是一个在 React 开发中非常流行的 JavaScript 工具库&#xff0c;它可以帮助开发者有条件地连接类名字符串&#xff0c;简化动态添加或删除类名的过程。 目录 一、 安装 二、导入 三、使用 四、选项卡应用 一、 安装 npm install classnames --save 二、导入…

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

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