element ui l-select 显示value不显示label问题

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量1.5k 收藏 1
点赞数 2
分类专栏： el ui 文章标签： web elementui
原文链接：https://blog.csdn.net/m0_46179609/article/details/104554859
版权

el-select下拉列表显示value不显示label问题

在做编辑页面时
需要取到列表项数据回显默认值
在做select回显的时候遇到了这个问题

明明拿到的值和value中的值一样
但是就是不转换成label
这种情况一般出现在value为数字的情况

数字转换成字符串即可

fenghuashao
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中el-select无法显示默认选中值的name，直接显示值value
小白求学进阶
04-18 6772
一、背景 在写项目的过程中，突然发现el-select这个组件，绑定的值没办法显示name，而是直接显示value。在编辑项目的弹框中，要显示项目绑定了哪个数据库（项目外连数据库表主键ID），结果发现直接把关联数据库的ID显示了出来，这与我的设想不一致，因此来找找是什么问题 二、解决 有问题的，有文档的当然第一时间去看文档，一看数据类型是string。 value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 数据类型strin
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
el-select 中v-model绑定值，数据回显只显示value，不显示label
m0_64931981的博客
10-08 961
如果这样写选择框显示的是0而不是上架，这种情况比较常见，原因是他们的数据类型不一致，这个时候统一数据类型就会显示对应的上架了。以下列出我遇到过的问题，代码如下所示。
elementUI选择器数据回显问题——展示value而不展示label
weixin_46709512的博客
05-26 1847
问题：elementUI选择器数据回显问题——展示value而不展示label 这种情况下，如果保证逻辑数据都没问题的话，一般是数据类型有问题。 选择器定义的el-option中的value值是number类型，然而我们获取到的数据是string类型 这样会导致我们数据回显时展示的是所谓的value，手动更改选项后又可以正常显示label 以上就是问题的整理与描述解析，如有其他疑惑可在评论区留言~ ...
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 1112
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
element-ui el-select回显显示value不显示label的问题
小宝的博客
11-26 3447
先上图，大家看图就明白了 正常情况 异常情况 数据的类型和value的类型导致的。
el-select 默认值显示value不显示label问题
weixin_34403976的博客
09-27 9359
el-select 默认值显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 原因是 返回的数字和el-option选框里value值的类型对应不上 一个是 Numer 一个是 String 所以就不转换了 检查一下统一类...
vue element-ui el-select 控件 显示value 而不显示 label的解决办法
souwer的博客
11-30 1350
vue element-ui el-select 控件，显示value而不显示label的解决办法
el-select 数据回显，只显示value不显示lable
程邓楠的博客
09-06 2985
主页面 点击actions，把当前VIPGrade ID传过去 这个时候我们可以看到，select List是有数据的，但是为什么只显示value，并没有显示label呢？ 这个时候我们打印一下，从主页面传入的 id 是什么类型，再看一下我们的 list 里面的id是什么类型 通过控制台我们可以看到，主页面传入的id 是String类型的，而我们 list 的 VIPGradeid 是Bumber类型的，看到这里我们就知道原因了； 我们在数据回显 重置的我们 VI...
element-ui 关于获取select 的label值方法
10-18
本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值： 在Element UI中，`el-select`的`v-model`绑定的是选中项的`value...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
element-ui的el-select如何不显示value，显示value对应的label值
qq_19509799的博客
05-31 8886
我们想到得到的是下面的效果： 现在遇到问题 效果是这样的： 调试发现 是value的格式存在问题，数据库读取到的数据不一定为number类型 需要自己转换一下 代码如下即可 但是 还有一种情况就是 : 此时在赋值时候 应该使用String ...
vue---解决el-select显示value不显示label的问题
maidu_xbd的博客
01-03 1万+
产生左图的情况一般是由于下图红框中的参数类型不一致 可修改【dictInfoForm.type】类型与【item.value】一致 this.dictInfoForm.type=String(this.dictInfoForm.type); //转换为String类型 this.dictInfoForm.type=Number(this.dictInf...
element ui el-select给默认值（code/value），不显示对应的文字（lable）
小白正在变黑
12-11 946
el-select的回显问题，可能是数据类型导致
vue 关于改变数据源 页面不热更新问题（举例element select选中不显示label）
weixin_42508580的博客
11-04 1578
深入响应原理（记录） 在代码中可以打印出select 的选中value 但是页面不显示对应的label //template 代码 <el-form-item label="工作模式" prop="workTypeId"> <el-select v-model="form.workTypeId" multiple @change="currentWork"> <el-option v-for="item in workTypeOp
element-ui的el-select如何回显value对应的label值
热门推荐
liona_koukou的博客
11-28 2万+
写在这里只为一个记录，感谢原作者分享，原作者地址：https://segmentfault.com/a/1190000016737140?_ea=4798728 原因是value的格式存在问题，数据库读取到的数据不一定为number或string类型 需要自己转换一下 总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可 即：option的value值如果...
日常开发记录- ElementUI select选择器编辑时反显的是 value 值，而没有显示出对应的 lable 值...
machine_vision123的博客
07-11 865
原因可能是因为，后台返回的 value 字符串类型，但是前端自己写的下拉选择 option 对应的 value 是整数类型，就会导致对应不起来，渲染不出效果。 <template> <el-selectv-model="value"placeholder="请选择"> <el-option v-for="itemincities"...
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 4744
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
element-ui select 选中value label
04-01
您可以使用 `v-model` 绑定 `select` 组件。`v-model` 绑定的值就是选中的 `option` 的 `value`。如果需要同时获取选中的 `label`，可以使用 `find` 方法，根据 `value` 找到对应的 `option`，再获取其 `label`。 示例代码： ```html <template> <div> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <p>选中的 value：{{ selectedValue }}</p> <p>选中的 label：{{ selectedLabel }}</p> </div> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: '1', label: '选项1' }, { value: '2', label: '选项2' }, { value: '3', label: '选项3' }, ], }; }, computed: { selectedLabel() { const option = this.options.find((item) => item.value === this.selectedValue); return option ? option.label : ''; }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值