elementUI的el-select 默认值显示value不显示label问题

最新推荐文章于 2024-08-13 14:10:55 发布
最新推荐文章于 2024-08-13 14:10:55 发布
阅读量1.2w 收藏 7
点赞数 5
文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46179609/article/details/104554859
版权
在Vue的编辑页面使用el-select组件时，遇到选框显示默认值只显示value而不显示对应的label。问题在于返回的数据value为Number类型，而el-option中的value需要的是String类型。解决方案是将数据中的value转换为String类型，以匹配el-option的预期，从而正确显示label。
摘要由CSDN通过智能技术生成

el-select 默认值显示value不显示label问题

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

明明拿到的值和value中的值一样
但是就是不转换成label
这种情况一般出现在value为数字的情况
问题
如图所示
在这里插入图片描述

原因是

返回的数字和el-option选框里value值的类型对应不上
一个是 Numer 一个是 String
解决后如图
在这里插入图片描述解决办法
既然el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-option选框的value将其转换为String类型就可以了

//显示编辑界面
			handleEdit: function (index, row)
最低0.47元/天 解锁文章
菜鸡涛
关注
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-option显示value而不是lable的问题
Cc
04-21 2045
el-option显示value而不是lable的问题，后台返回数字前端想要显示文字
el-select 默认选中值及自定义样式
qq_37550440的博客
01-11 1万+
<template> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="项目状态:" prop="status"> <el-select :disabled="isRead" v-model="form.status" class="mySelect" popper-class="wentipingSe.
el-select 默认选中值
最新发布
前端小菜鸟也有人起的博客
08-13 348
el-select 默认选中值
el-select 多选框使用 以及回显默认选中说明
qq_37570710的博客
03-06 8931
vue select 多选
el-select 默认选中
qq_43628847的博客
05-26 1779
<el-form-item label="接收对象" prop="receiveObject"> <el-select placeholder="请选择接收对象" style="width: 100%" v-model="queryParam.receiveObject"> <el-option v-for="item in objectSelectOptions" :key="item.value" :label="item.l
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 4927
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，...
Vue ElementUI el-select 图片选择效果
02-24
基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721
el-select默认选中一个选项
weixin_46444211的博客
10-20 2384
【代码】el-select默认选中一个选项。
Vue element el-select 选择器设置默认选中
热门推荐
srz1128的博客
08-26 5万+
为了防止用户漏操作传入空值数据，在select下拉框中设置默认选中值。 <el-form-item label="状态：" prop="state"> <el-select v-model="formData.state" placeholder="请选择用户状态"> <el-option v-for="item in stateData" :key="item.valu
element-UI el-select 绑定对象类型，设置初始值，不能正确显示
Dreamer0Action的博客
05-14 2663
在开发过程中，发现使用简单的el-select 标签，自己写的option，赋初始值后，页面上显示的是value值； 从网上查找问题解决方案，大多数都是写出根本原因，而没有给出解决方案。 （问题在于数据类型，form.InWindowPositionType 的值为 String ，而 列表的 value 为 Number，并不全等，导致无法找到对应的项 。。。所以需要对数据类型进行转换 ） ### 解决方案：将option中的value值改成number 将 value="0"改为 :value=0
el-select 默认选中第一个，动态&&静态获取
weixin_40030173的博客
08-12 3万+
第一种情况： el-select动态获取数据， 默认选中第一个 <el-select v-model="formData.operator_id" placeholder="请选择" class="filter-item" style="width: 130px"> <el-option v-for="item in operatorLists" :key="item.key" :label="item.operator_name" .
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 5970
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
el-select 实现手动/默认全选-详细注释
leila_W的博客
08-22 718
【代码】el-select 实现手动/默认全选。
项目开发:Vue+elementUI中el-select不对应展示问题的详细解答
泡椒猪肝的博客
08-06 1980
项目开发:elementUI中el-select不对应展示问题一.问题:elementUI中el-select不对应展示问题二.问题产生原因:三.具体解决方案 一.问题:elementUI中el-select不对应展示问题 图中代码 <el-select v-model="scope.row.goodsType" placeholder="请选择"> <el-option label="普货" value="0"></el-op
el-select 默认值
07-14
el-select 的默认值可以通过设置 v-model 绑定的值来实现。例如，如果你想让 el-select 的默认值为 "apple"，你可以这样设置： ```html <template> <div> <el-select v-model="selectedFruit"> <el-option label="Apple" value="apple"></el-option> <el-option label="Banana" value="banana"></el-option> <el-option label="Orange" value="orange"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedFruit: 'apple' } } } </script> ``` 这样，当 el-select 第一次被渲染时，它会自动选择 "Apple" 这个选项作为默认值。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值