el-select同时获取label和value，value值绑定对象报错

最新推荐文章于 2024-05-22 23:42:29 发布
最新推荐文章于 2024-05-22 23:42:29 发布
阅读量819 收藏 2
点赞数
文章标签： sql javascript 数据库 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/126613579
版权

需求是传参格式为[{label:xxx,value:xxx}]

想在el-option的value里直接绑定key，value的格式

 

 但是发现选中一个值所有的都被选中，打印value却是我需要的格式

研究后发现，当value绑定对象的时候，select需要设置 value-key 属性确保每一个选项都有独立的键值

 

 

 但需要注意的是，value-key中绑定的参数必须与value里绑定的参数相同且是唯一的值，不然无法对应

 

刘大气
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select获取选中的label值.pdf
12-16
el-select获取选中的label值
el-select ——el-option中 value、 label的显示问题
weixin_43493113的博客
01-25 6973
el-select ——el-option中 value、 label的显示问题 < el-select v-model.trim="modifyLoopForm.lightingtype" placeholder="亮灯类型" value-key="id" style="width: 100%" > <el-option v-for="item in lightingItem" :key="item.id" :la
el-select设置对象为value选中错误
qq_43760774的博客
04-17 1248
解决该问题的方法是，在 v-model 中使用一个新的对象类型的值来绑定选中的对象，确保 v-model 中绑定的值与选项列表中的对象不是同一个引用地址。例如，可以使用 lodash 库中的 cloneDeep 方法，将选中的对象克隆一份新的来作为 v-model 中的绑定值。需要注意的是，如果将 v-model 中的值设置为对象类型，需要开启 deep 模式来深度监听对象变化，否则无法在选中对象中修改属性时触发 watch 监听。// 将选中的对象克隆一份新的来绑定到 v-model 上。
当vue+element（el-select）下拉框的绑定的value值为对象时，报错“ ＜transition-group＞ children must be keyed: ＜ElTag＞”
熬夜搬码员的博客
05-31 694
原因： 是因为el-select中v-model绑定的值类型是对象。且没有设置value-key属性作为唯一标识符 解决办法： 在el-select里面设置value-key属性，值要和option中key的值保持一致。（ps：option绑定的值好像不能自己设置类型，比如在里面写花括号“{}”，会报错） <el-select multiple v-model='selectedArray' value-key="id"> <!-- 因为选定的value值是对象 为了保证
elementui 中的 el-select 同时绑定name和value
qq_39188241的博客
10-12 840
element
React的下拉框的key,value的值同时传送
SeveCc博客
09-30 2827
需求： 一般下拉框选择后会传送一个ID号给后台，然而今天后台要让前端页面将id和name,一起送过去。 总结思路：开始没想到要到Select,里面加一个事件来传值，想的是选择后确认值然后通过用户选择的来将用户的选的值取出来在送过去，然在就在Option里面加事件，来触发现传过去的值是所有的name,然后就不能打到实际效果，后面找到api看到这个 <FormItem label="所属部门"...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 关于获取select 的label值方法
12-29
在某些场景下，还是需要在获得label的值跟Value值的。 vue获取值的方式： <el label=库位 prop=goodsLocationId> <el span=15> <el v-model=scope.row.goodsLocationId placeholder=货位地址 change=...
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select v-model属性无法绑定option的value---踩过的坑
u012558074的博客
01-28 4012
错误代码： <el-select v-model="seller.DelFlag" placeholder="请选择商家状态"> <el-option label="正常" value=0></el-option> <el-option label="关闭" value=1></el-option> </el-select> 找了半天没发现原因，想着后来从value入手，op
解决element-ui的下拉框有值，点击后却无法选中的问题
yiyueqinghui的博客
09-15 2144
出现原因 因为下拉列表的数据是根据输入框的值的变化时行实时调用接口来更新而非不变的，频繁的更新，可能造成点击下拉列表中的某项后，select所绑定的value值无法进行及时的更新，尤其是所绑定的值是对象时（vue不能检测对象属性的变化），更加会造成无法选中的问题。 解决方法 无法及时更新，那么用change事件监听值的变化，调用this.$forceUpdate()手动强制更新，重新渲染。 代码如下 <el-select v-model="value" placeholder="请选择" @chan
vue.js 如何处理返回数据中select 选项key和value不一致的问题？
三拾的博客
01-11 644
一般我们后端返回的key和vlaue，属性值都是自定义的，这样我们下拉菜单就不能公共使用，所以我们要封装一个select公用的下拉组件。下拉框数据转为需要的key/value提示：以下是本篇文章正文内容，下面案例可供参考希望有帮助到小伙伴们噢。
Vue+Element UI中Select下拉框绑定对象
小破孩的博客
01-18 2822
在开发过程中使用Element UI中Select下拉框时可能会遇到绑定对象的情况，总结如下： <el-select v-model="productionClassId" value-key="id" @change="deptChangeVal" style="width:200px" placeholder="请选择"> <el-option v-for="item in optionsDept" :key="item.id" :label
element-ui里面单选框和下拉框，写死数据和从接口获取数据分别该怎么操作
热门推荐
肖肖肖丽珠的博客
08-07 1万+
单选和下拉数据是写死的时候。 &lt;el-form-item label="可编辑"&gt;        &lt;el-radio-group v-model="addForm.edititem"&gt;  addForm.edititem最后取得的label的值。     &lt;el-radio class="radio" label="1"&gt;是&lt;/el
PostgreSQL常用的领域和用例
lee_vincent1的博客
05-21 890
PostgreSQL 因其丰富的功能、高可靠性和高度可扩展性，被广泛应用于各种领域，从企业级应用、数据仓库、物联网到科学研究和公共部门应用。通过使用各种扩展和优化技术，PostgreSQL 还能满足更高的性能需求和特定应用场景的要求。
ssms执行建表后如何自动刷新所有SQL SERVER表
05-20 210
在 SSMS 中，前往“工具” > “选项” > “环境” > “键盘”，搜索“刷新对象资源管理器”，然后分配一个快捷键。请注意，自动刷新功能并不能保证在所有情况下都能正常工作，尤其是在 SSMS 启动时、网络问题或 SSMS 的 bug 导致刷新失败时。使用脚本自动化：如果你需要频繁创建表，可以写一个小型应用程序或脚本来自动执行创建表的操作并在每次执行后自动刷新对象资源管理器。使用脚本自动刷新：在你执行创建表的 T-SQL 脚本后，可以通过执行以下 SQL 命令来手动刷新对象资源管理器。
SQL常用基础语句（一）-- ABCDE开头
最新发布
wodertianna的博客
05-22 980
1:星期一 2:星期二 3:星期三 4:星期四 5:星期五 6:星期六 0:星期日。# 2:星期一 3:星期二 4:星期三 5:星期四 6:星期五 7:星期六 1:星期日。# 0:星期一 1:星期二 2:星期三 3:星期四 4:星期五 5:星期六 6:星期日。2）count(column)会对指定列具有的行数进行统计，除去值为NULL的行。#指定日期加1天（可将DAY换为MONTH,YEAR来实现加1个月,1年）如果字段等于预期值，则返回结果1，否则返回结果2，end代表语句结束。
DQL( 数据查询语言)
xiaotiaoza的博客
05-21 281
逻辑查询 not>and>or and:遇假则假 or:遇真则真 not:取反。select 字段,字段2,…from 表名 where 筛选条件;select * from 表名 where 筛选条件;is null 为空 is not null 不为空。select 字段,字段2,…需要把%或者_这个通配符转义称为普通的字符串。%:代表这个位置有0个或者无数个字符;select * from 表名;_:代表这个位置只有1个字符;
el-select 同时获取key和value
06-03
在Vue的el-select组件中，可以通过设置el-option组件的label和value属性来同时获取Map集合的key和value。 以下是一个示例代码： ```html <template> <el-select v-model="selected" placeholder="请选择"> <el-option v-for="(value, key) in myMap" :key="key" :label="key" :value="value"></el-option> </el-select> </template> <script> export default { data() { return { myMap: new Map([ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"] ]), selected: null }; } }; </script> ``` 在这个例子中，我们使用了element-ui提供的el-select和el-option组件，使用v-for指令遍历Map集合，将其key和value分别绑定到el-option组件的label和value属性上。同时，我们使用v-model指令将el-select组件和选中的值绑定到Vue实例中的selected属性上。 需要注意的是，我们需要在Vue实例的data属性中定义Map集合和selected属性，并且需要使用ES6的Map语法来创建Map集合。同时，我们需要引入element-ui组件库并正确配置Vue实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值