vue---解决el-select显示value不显示label的问题

最新推荐文章于 2024-08-27 13:31:29 发布
最新推荐文章于 2024-08-27 13:31:29 发布
阅读量1.3w 收藏 6
点赞数 14
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maidu_xbd/article/details/103827813
版权

 

    

产生左图的情况一般是由于下图红框中的参数类型不一致

可修改【dictInfoForm.type】类型与【item.value】一致

 this.dictInfoForm.type = String(this.dictInfoForm.type);    //转换为String类型

 this.dictInfoForm.type = Number(this.dictInfoForm.type);  //转换为Number类型

 

 

maidu_xbd
关注
专栏目录
Vue: 多个el-select不能重复选择相同属性
02-22
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时，这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突，即用户不能在多个select中选择相同的值。以下是对这个问题的...
el-select 回显是value值
cw_csdn的博客
06-14 1018
排查后是由于dataType是Number类型，而value值对应的是字符串，只需加上v-bind即：即可。
vue 解决element-ui中el-select显示value不显示label的问题
weixin_43575792的博客
03-27 1万+
项目场景： 使用element-ui中的el-select，给选择框赋值时显示的值是value不是label 如下图所示，显示内容不是label 石河子大学而是value 1 原因分析： 产生上图的情况一般是由于el-select里面的v-model和v-value参数的类型不同，即下方代码中的form.sid和item.sid的类型不一致， <el-select v-model="form.sid" placeholder="请选择学校" style="width: 100%">
el-select组件同时输出label和name的值，这优雅不？--vue3+ts
残阳曦月
08-11 351
el-select组件同时输出label和name的值，实现的方法很多，有添加value-key=‘xxx’，有通过@change获取输出赋值（其实也差不多）。若项目是vue3+ts+element-plus全局，可直接粘贴代码测试。写在最后，有想法可以一起交流交流，欢迎各位大佬洽谈交流。这种写法，不知道有没有什么弊端？懂的大佬，求教求教！试试的我方法：input隐藏域。
element-ui的el-select如何回显value对应的label值
热门推荐
liona_koukou的博客
11-28 2万+
写在这里只为一个记录，感谢原作者分享，原作者地址：https://segmentfault.com/a/1190000016737140?_ea=4798728 原因是value的格式存在问题，数据库读取到的数据不一定为number或string类型 需要自己转换一下 总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可 即：option的value值如果...
解决el-select回显value，不显示lable，以及之后不能操作的问题
qq_45779588的博客
04-11 797
el-select v-model="addData.classifyIdsList" placeholder="请选择" multiple @change="$forceUpdate()">不能操作 加@change="$forceUpdate()"
el-select 数据回显，只显示value不显示lable
程邓楠的博客
09-06 3019
主页面 点击actions，把当前VIPGrade ID传过去 这个时候我们可以看到，select List是有数据的，但是为什么只显示value，并没有显示label呢？ 这个时候我们打印一下，从主页面传入的 id 是什么类型，再看一下我们的 list 里面的id是什么类型 通过控制台我们可以看到，主页面传入的id 是String类型的，而我们 list 的 VIPGradeid 是Bumber类型的，看到这里我们就知道原因了； 我们在数据回显 重置的我们 VI...
el-select、el-select-v2默认值显示value不显示label的问题
qq_36076928的博客
08-09 2301
el-select、el-select-v2默认值显示value不显示label的问题
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
<el-form label-width="80px"> <el-form-item label="选择项"> <el-select v-model="selected"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-...
el-select数据过多懒加载的解决(loadmore)
10-16
总之，el-select组件数据过多时的懒加载解决方案，通过分页加载数据和监听滚动事件来动态渲染el-select的内容，可以有效解决大量数据导致的性能问题，并提供更加流畅的用户交互体验。在实现时，需要注意数据同步和...
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
element-ui el-select回显显示value不显示label的问题
小宝的博客
11-26 3480
先上图，大家看图就明白了 正常情况 异常情况 数据的类型和value的类型导致的。
el-select 选择器 当value有值但label为空，默认value值作为下拉框值时
snrt_Aurora的博客
12-21 1034
选择器下拉框value有值label为空时，默认展示value数据，处理解决方法
elementUI的el-select 默认值显示value不显示label问题
菜鸡涛的博客
02-28 1万+
el-select 默认值显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 问题 如图所示 原因是 返回的数字和el-option选框里value值的类型对应不上 一个是 Numer 一个是 String 解决后如图 ...
当下拉框数据value值一致，label值不一致，视图如何更新
最新发布
qq_36619440的博客
08-27 122
这是我司的一个这样的需求，下拉框的数据由后端返回且可筛选，当数据库筛选没有数据时，后端会返回一个value为0，label为筛选条件的数据，如果多输入几次数据库没有的数据时就会出现这个问题，页面数据变更，但是下拉框的选择的视图数据并没有变化，因为在系统眼里，你的value并没有变化，也就不会触发视图更新，要处理此问题也很简答。v-model.sync=‘label变量’在下拉框内在加一个绑定label值。
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2544
vue3中弹框中的el-select下拉组件显示value而不显示label
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 6056
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
vue3 解决el-select 无数据显示中文问题
06-03
要解决el-select无数据显示中文问题，可以在el-select标签中加上no-data-text属性，将其值设置为你想要显示的中文文本即可。例如： ``` <el-select v-model="value" no-data-text="暂无数据"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> </el-select> ``` 这样当el-select中没有数据时，就会显示“暂无数据”的中文文本。注意，这个属性只在无数据时显示，有数据时不会显示。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值