vue element-ui el-select 控件 显示value 而不显示 label的解决办法

最新推荐文章于 2024-06-06 16:36:35 发布
原创 最新推荐文章于 2024-06-06 16:36:35 发布 · 1.4k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端 #vue.js

本文介绍了在Vue中使用Element-UI的el-select组件时遇到的显示value而非label的错误。问题源于绑定数据的value类型与v-model字段类型不匹配。解决方案是确保两者数据类型一致，确保正确显示label。通过调整数据类型或在绑定时进行转换，可以成功展示预期的label内容。

vue element-ui el-select 控件 显示value 而不显示 label的解决办法

问题描述

代码如下：
在这里插入图片描述现象如下
在这里插入图片描述

原因

el-select 绑定的数据的 value 的数据类型与 el-select 的 v-model 绑定的字段的数据类型不一致导致。

解决方法

在这里插入图片描述

效果

在这里插入图片描述

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动
weixin_41346436的博客
03-11 811
【代码】vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动。
2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用
GAARA
11-21 980
零.回顾 一.基本组件 0.有哪些基本组件? 1.layout布局:通过基础的 24 分栏，迅速简便地创建布局 有哪些布局? 示例:使用row组件和col组件+span进行基础布局 2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码 容器组件的基本结构 常见页面布局 第一种 第二种 第三种 第四种(常用) 第五种 示例:使用第四种布局 二.表单组件 1.有哪些表单组件? 2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据 有哪些表单?
element-ui select选择器显示value值而不是label值的问题
yuxiangmitu的博客
07-20 7017
Element Select 选择器显示 value 而不是 label，可能是因为返回值的数据类型不匹配，需要转成Number类型。 比如当数据库返回的 value 是 bigint 类型时就不能自动匹配，如果是 varchar 类型就能自动匹配显示对应的 label 值。 this.dataForm.custId = Number(this.dataForm.custId) 如果要获取选择器的label值，可以在 el-select 选择器上添加一个change方法 @change="cu.
elementUI选择器数据回显问题——展示value而不展示label
weixin_46709512的博客
05-26 2012
问题：elementUI选择器数据回显问题——展示value而不展示label 这种情况下，如果保证逻辑数据都没问题的话，一般是数据类型有问题。 选择器定义的el-option中的value值是number类型，然而我们获取到的数据是string类型 这样会导致我们数据回显时展示的是所谓的value，手动更改选项后又可以正常显示label 以上就是问题的整理与描述解析，如有其他疑惑可在评论区留言~ ...
【前端】element级联选择器中el-cascader通过props自定义设置value、label、children
m0_64210833的博客
11-28 1万+
element级联选择器中el-cascader通过props自定义设置value、label、children
ElementUI el-select 不显示lable而显示value的解决
D493829844的博客
01-07 3322
1. 按照官网例子，return的的数组写死内容，如下：options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }] 然后<el-select v-model="value" placeholder="请选择"> &l
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%">
element-ui 中el-select 加 tree树形控件组合使用
demo_020的博客
01-04 3744
项目中要求一个下拉框里面的选项可以拆叠。在element-ui官网里找了两个组件很符合我的需求。 关键是怎么把他们组合在一起。下面是我从网上查到的方法。 <el-select v-model="mineStatus" placeholder="请选择" multiple @change="selectChange" style="width:30%;"> <el-option :value="mineStatusValue" style="height: auto"&gt
Element-UI全面入门与实战技巧
最新发布
全世界的博客
06-06 2100
Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
element ui l-select 显示value不显示label问题
fenghuashao的博客
05-27 1656
el-select下拉列表显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 数字转换成字符串即可 ...
vue 在外部方法给下拉框赋值后不显示label
吃黄瓜不蘸酱的博客
01-09 449
vue 在外部方法给下拉框赋值后不显示label
el-select 数据回显，只显示value不显示lable
程邓楠的博客
09-06 3134
主页面 点击actions，把当前VIPGrade ID传过去 这个时候我们可以看到，select List是有数据的，但是为什么只显示value，并没有显示label呢？ 这个时候我们打印一下，从主页面传入的 id 是什么类型，再看一下我们的 list 里面的id是什么类型 通过控制台我们可以看到，主页面传入的id 是String类型的，而我们 list 的 VIPGradeid 是Bumber类型的，看到这里我们就知道原因了； 我们在数据回显 重置的我们 VI...
element-ui el-select回显显示value不显示label的问题
小宝的博客
11-26 3636
先上图，大家看图就明白了 正常情况 异常情况 数据的类型和value的类型导致的。
el-select 中v-model绑定值，数据回显只显示value，不显示label
热门推荐
ZMJ_QQ的博客
03-09 2万+
1、当v-model绑定的是一个值时 <el-select v-model="modelTree" filterable> <el-option v-for="item in nameList" :key="item.id" :label="item.title" :value="item.id"> </el-option> </el-select> 数据回显只显示value,不显示label，原因可能有以下几个： 1、option的数据中
element-ui el-select/el-cascader设置默认值，默认值不显示
weixin_43144209的博客
10-21 6705
最近接手了一个后台管理项目，项目使用了Element-ui组件， 使用了Select 下拉菜单展示并选择内容，使用了cascader做级联城市选择器 看了官方文档我们知道可以使用v-model绑定数据，设置初始值/默认值 <el-form-item label="班级" prop="classId"> <el-select v-model="form.classId" placeholder="请选择班级"> <el-option v-for="(valu
element ui 级联选择器，渲染后不显示数据
m0_60578224的博客
06-28 1250
element ui 级联选择器 渲染后不显示数据
ElementUi的Cascader级联选择器指定value和label
weixin_55879414的博客
10-15 3576
ElementUi中的
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 5230
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值