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

最新推荐文章于 2024-04-29 10:21:25 发布
最新推荐文章于 2024-04-29 10:21:25 发布
阅读量797 收藏
点赞数
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43625134/article/details/131287138
版权

文章目录

select 显示如下

el-select在编辑调用的时候一直显示的不是label值，而是本身的value值。尝试了很多种方法，都没有解决。
正常的形式
在这里插入图片描述
错误的形式
在这里插入图片描述

发生错误的原因

显示不正常，多数是由于得到的数据类型对应不上表单操作的数据类型进行相应转换即可。
我从后端获取的数据的类型是string类型；但是我自己定义select的value类型是number类型，导致了数据类型不相同，从而不能正常的显示select的label值。

〔晴【天】º〕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的el-select控件不显示value值，显示value对应的label值
weixin_44238871的博客
06-15 4414
<el-form-item label="车辆种类" prop="type"> <el-select v-model="dataForm.type" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> ...
el-select显示，当选择框的选项无法与选择框的value值匹配时，不想显示value值的处理办法
qq_42185724的博客
01-22 5610
写在前面，当出现这种情况的时候，选择框option肯定是从接口获取的。 举例一个表单回显时的情况，当点击编辑按钮，表单打开。由于没有想匹配的选项，选择框自然显示了所获取的value值。那么我们处理这个情况的代码就得放在这个地方，写在点击编辑按钮的方法中。下面我先贴出代码再稍微讲下逻辑。 this.addForm = { ...row }; let i = true; //声明一个变量，用做判断 //解决存储介质数组无对应匹配选问题，匹配不成功选择框显示为空
vue el-element中el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值
最新发布
qq_45067263的博客
04-29 1501
el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值。第一个值为选择的数值，暂时用不到，第二个值为数据的下标，用于事件改变值时提供坐标，第三个值为改变后的整条数据。this.$set方法，第一个值为改变谁，第二个值为改变值的坐标，第三个则是改变后数据，重新赋值给详情数据。this.offerBatchModifyData是我的详情数据，InquiryItemList是数组，可以根据自己的数据做相应调整，这样就可以正常显示选中的数据了。
el-select选择器获取label值
江拥羡橙的博客
08-27 7677
用于elementui Select选择器获取label值
EL不能显示value后的值
m0_74113296的博客
11-22 137
确保你的Tomcat服务器的版本支持JSP 2.0或更高版本，以便支持EL表达式。如果你使用的是较旧的Tomcat版本，可能需要升级为支持更高JSP规范的版本。尝试清除IDEA的缓存，重新构建项目，或者清除Tomcat的工作目录，然后重新启动Tomcat。b. 在弹出的窗口中，选择 "Java"，然后选择 "el-api.jar" 文件。这里应该包括你的项目依赖的所有库文件。后面的值，这可能是因为你的JSP容器（通常是Tomcat）或IDE的配置问题。在左侧的项目资源管理器中，找到你的项目，并展开它。
element el-select 默认label展示
josiecici的博客
07-13 1398
效果： 代码： 核心代码： v-model="region"
element-ui 远程搜索组件el-select在项目中组件化的实现代码
12-13
在项目中发现使用el-select时写的比较多重复代码，还有就是同一个页面使用el-select会出现label值会显示value值， el-select组件化： <el-select :class="obj&&keyword[keywordAttr.label]? 'selected': ''" ...
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model ... <el v-for=item key=item.value value=item.value label=item.label></el> </el> [removed] export default{ data() { return { options: [{ value: '01',
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，...
Vue + Element-ui的下拉框el-select获取额外参数详解
12-28
<el label=用户类型 width=180> <template slot-scope=scope> <el v-model=scope.row.roleID placeholder=请选择 change=changeRole($event,scope)> <el-option v-for=item in roles :key=item.value :l
vue实现select下拉显示隐藏功能
12-30
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，需展示对应的内容界面；... <el label=表结构变更 value=tableChange></el> <el-option label=接口变更 va
element-ui select选择器显示value值而不是label值的问题
yuxiangmitu的博客
07-20 6644
Element Select 选择器显示 value 而不是 label，可能是因为返回值的数据类型不匹配，需要转成Number类型。 比如当数据库返回的 value 是 bigint 类型时就不能自动匹配，如果是 varchar 类型就能自动匹配显示对应的 label 值。 this.dataForm.custId = Number(this.dataForm.custId) 如果要获取选择器的label值，可以在 el-select 选择器上添加一个change方法 @change="cu.
el-select el-option未回显选中或显示value值
qq_30434271的博客
08-18 3323
问题分析：很有可能是由于数据类型不一致导致的，比如后台接口返回的字段类型为int，但前端el-option设置的value为String类型，因此只需要对后台接口返回的int值，进行一次int.toString()即可。
el-select下拉选择不回显问题和下拉框显示数字问题
szzlh123456789的博客
02-04 1318
在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。
el-select值的回显问题：如何使element-ui的下拉框显示label值
热门推荐
qq_43779703的博客
09-11 3万+
参考思路
element-ui的el-select如何不显示value，显示value对应的label值
qq_24832277的博客
01-27 1772
1.element-ui select组件会自动匹配 传入的值 和 value值,如果相等 则显示此value所对应的label值 这里没有匹配原因则是我们绑定值是字符串 也就是 “0”，后端数据是 0 类型是number 所以拼接一下就解决了（让他转化成字符串） ...
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%">
elementUI el-select 选择了label却显示value的值
InterestAndFun的博客
11-10 3563
在实际项目开发中出现了选择label却显示value的情况 百度上搜索了一圈，全都是说value的数据类型问题，把我带偏了。折腾了半天我才转过来，会不会就是label的问题。 我原本习惯都写上span {{lable}}然后放入label的值（当年没用elementUI开发留下来的习惯，得改），按道理来说一注掉，显示的应该还是label的值，而不是value的值。但是显示的偏偏就是value的值，那就是问题所在了，我的label输入导入有问题。 详细检查数据接口获取的数据都没问题，我又陷入了沉思，无意之
vue中el-select无法显示默认选中值的name，直接显示值value
小白求学进阶
04-18 6623
一、背景 在写项目的过程中，突然发现el-select这个组件，绑定的值没办法显示name，而是直接显示value。在编辑项目的弹框中，要显示项目绑定了哪个数据库（项目外连数据库表主键ID），结果发现直接把关联数据库的ID显示了出来，这与我的设想不一致，因此来找找是什么问题 二、解决 有问题的，有文档的当然第一时间去看文档，一看数据类型是string。 value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 数据类型strin
el-select怎么根据value值展示label
07-27
要根据value值展示label，你可以使用el-select的filterable属性结合computed属性或watch来实现。 下面是一个示例代码： ```html <template> <el-select v-model="selectedValue" filterable placeholder="请选择"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ] } }, computed: { selectedLabel() { const selectedOption = this.options.find(option => option.value === this.selectedValue) return selectedOption ? selectedOption.label : '' } }, watch: { selectedValue(newValue) { const selectedOption = this.options.find(option => option.value === newValue) if (selectedOption) { this.selectedLabel = selectedOption.label } else { this.selectedLabel = '' } } } } </script> ``` 在上述代码中，我们使用了el-select的filterable属性，它允许用户输入进行筛选。 使用computed属性selectedLabel来获取根据selectedValue对应的label。通过在options数组中查找与selectedValue相匹配的选项，并返回其label属性。 通过watch监听selectedValue的变化，如果selectedValue的值改变，则根据新的值找到对应的选项，并将其label赋值给selectedLabel。 这样，当用户输入value值或选择一个选项时，el-select会根据value值展示对应的label。同时，selectedValue变量会根据用户的输入或选择进行更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值