element-ui的el-select如何不显示value，显示value对应的label值

最新推荐文章于 2023-09-21 14:02:58 发布
最新推荐文章于 2023-09-21 14:02:58 发布
阅读量1.8k 收藏 1
点赞数 1
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24832277/article/details/113278786
版权

1.element-ui select组件会自动匹配 传入的值 和 value值,如果相等 则显示此value所对应的label值
这里没有匹配原因则是我们绑定值是字符串 也就是 “0”，后端数据是 0 类型是number
所以拼接一下就解决了（让他转化成字符串）
在这里插入图片描述

小伟利
关注
vue使用el-select下拉框匹配不到值的优化方案，el-select显示，当选择框的选项无法与选择框的value值匹配时，不显示value值的处理办法
King Saj
01-03 4891
新建表单数据，下拉框选项一般从接口获取的数据列表，比如后期某个数据关停了，这条数据就会被删除，导致我们取不到这条数据。就会出现 el-select下拉框匹配不到值的情况。所以我们要处理这种情况的。
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
el-select显示，当选择框的选项无法与选择框的value值匹配时，不想显示value值的处理办法
qq_42185724的博客
01-22 5966
写在前面，当出现这种情况的时候，选择框option肯定是从接口获取的。 举例一个表单回显时的情况，当点击编辑按钮，表单打开。由于没有想匹配的选项，选择框自然显示了所获取的value值。那么我们处理这个情况的代码就得放在这个地方，写在点击编辑按钮的方法中。下面我先贴出代码再稍微讲下逻辑。 this.addForm = { ...row }; let i = true; //声明一个变量，用做判断 //解决存储介质数组无对应匹配选问题，匹配不成功选择框显示为空
element-ui的el-select不显示value对应的label值
zp0926的博客
05-28 2107
显示效果如下： 期望效果如下： 调试发现： 是value的格式存在问题，读取到的数据和字段返回的数据类型不一致所导致的。 我存的字段是一个省份的字符串ID数组（11，22，33，44，55）格式，进行切割后得到的是字符串，而后台返回的集合中value是long类型的数组，由于得到的数据类型对应不上表单操作的数据类型，进行相应转换即可。 <el-form-item label="可销售省份" prop="areaIds"> <el-sel
el-select如何不显示value，显示value对应的label值
qq_43625134的博客
06-19 945
我从后端获取的数据的类型是string类型；但是我自己定义select的value类型是number类型，导致了数据类型不相同，从而不能正常的显示select的label值。el-select在编辑调用的时候一直显示的不是label值，而是本身的value值。尝试了很多种方法，都没有解决。显示不正常，多数是由于得到的数据类型对应不上表单操作的数据类型进行相应转换即可。
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
element-ui 关于获取select 的label值方法
10-18
本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值： 在Element UI中，`el-select`的`v-model`绑定的是选中项的`value...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
总结一下，当使用Vue + Element-ui的下拉框`el-select`时，通过`@change`事件结合`$event`参数可以获取到选中的值，而通过额外传递的参数（如`scope`或自定义值）则可以获取到更多上下文信息。这种技巧适用于那些...
element-ui el-select绑定实际值显示label值
热门推荐
hanglife的博客
08-16 1万+
html 例后端返回数据 res = {type:0} 直接赋给form绑定值 this.form = res; 结果 虽然可以写一个表达式或判断一下，但会多一步操作 element-ui select组件会自动匹配 传入的值 和 value值,如果相等 则显示此value所对应的label值 这里没有匹配原因则是我们绑定值是字符串 也就是 "0"，后端数据是 0 类型...
＜el-select＞ 当绑定的值在选项中不存在时，不显示其对象的key
最新发布
u012632105的博客
09-21 1749
若要实现在 el-select 组件中当绑定的值在选项中不存在时，不显示其对象的 key，可以使用 slot-scope 和 v-if 来进行判断。
vue el-table列表中根据value显示label
qq_43498712的博客
03-29 4654
el-table列表中根据value显示label 适用情况： 后端返回的page只有编码，要求显示名称。 能够获取list ,包含所有的编码和名称 关键代码： <el-table-column prop="regionCode" label="站点" header-align="center" align="center" > <template slot-scope=
el-select的使用、根据后台返回的value显示对应label值
qiuqiu1894的博客
10-07 1万+
** 1.el-select的使用 ** 模板： <div class="group-brank"> <label class="col-30"><span style='color:red'>*</span>难度系数</label> <template> <el-select v-model="diff...
element-ui的el-select如何回显value对应的label值
大桶爆米花eee
02-27 6947
现在的问题是不显示label，只显示value值 原因是value的格式存在问题，数据库读取到的value数据类型不一定为number或string类型 需要自己转换成相同的类型 总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可 即：option的value值如果为number，保存后从后台拿到的值需要转为number类型；如果为string，则需要转为st...
el-select 下拉框选择后获取label值，用value返回list对象数组中的对应的label
11-25 1506
el-select 下拉框选择后获取label值，用value返回ist对象数组中的对应的label。
使用elementUI的select，当没有匹配的时候默认显示value值；
Lee_yuki
10-18 3056
使用elementUI的select，当没有匹配的时候默认显示value值； 问题：多处页面用到了相同的选择，为避免多次请求接口，选项列表存到了localstrage中，对选项增删改时，更新localstrage。但是有些时候后端接口返回的value值，已经删除了，localstrage中无法匹配到对应的label，回显显示value值。 解决：在公用表单组件中，如果type为select，循环localstrage的数组，如果没有匹配到的，设置该表单值为空 ```javascript this.item
使用el-select属性的值为Int与String类型不匹配时显示直接数字问题
aaaaaaaaa_li的博客
01-10 1755
使用el-select属性的值为Int与String类型不匹配时显示直接数字问题
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值