修改某条数据，el-select设置默认值无法正确显示label的解决方案

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

编辑某条记录，无法正确回显el-select的的label，只显示key。

	 <el-select v-model="editFormVision.eyeSightType" placeholder="请选择" style="width:230px;">
		    <el-option
		      v-for="item in cvt"
		      :key="item.eyeSightType"
		      :label="item.eyeSightTypeName"
		      :value="item.eyeSightType">
		    </el-option>
	  </el-select>

在这里插入图片描述
是因为数据类型不同导致的，el-select的key需要的是Number类型，从后台获取的数据到前台默认是String类型，所以这里需要将String转成Number即可正确回显

this.editFormVision.eyeSightType = Number(res.data[0].eyeSightType)

在这里插入图片描述

qickcao
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-option显示value而不是lable的问题
Cc
04-21 1996
el-option显示value而不是lable的问题，后台返回数字前端想要显示文字
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
关于elementUi 的 el-selected 编辑的使用设置默认值不显示问题。
weixin_56297713的博客
08-22 671
问题就是 后端返回的数据类型和elementUi 的 select组件类型不一致。直接使用 parseInt(value)转一下类型就可以了。首先使用 v-mode=“value”绑定。
关于el-select组件设置默认值的实现
qwerewf的博客
08-20 1万+
关于el-select组件设置默认值的实现 问题： 最近写项目的时候遇到将el-select组件设置默认值需求，通过查阅资料发现很多是使用v-model来实现的，但是只用v-model可能会有一些小小的问题。因此根据他们的进行改变了一下 实现方式 el-select组件： <el-select v-model="templateValue" placeholder="请选择模板" @change="selectTm"> <el-option v-for="item
element ui el-select给默认值（code/value），不显示对应的文字（lable）
小白正在变黑
12-11 949
el-select的回显问题，可能是数据类型导致
Vue如何解决el-select下拉框显示ID不显示label问题
最新发布
weixin_46641145的博客
04-10 269
需要写一个页面跳转，弹出新的el-dialog弹出框，里面需要下拉组件，写完之后label怎么也不回显，结果是数据类型不匹配，这错误太低级了(ಥ﹏ಥ)if(!
element-ui中的select下拉列表设置默认值方法
10-18
然而，在实际开发过程中，经常需要设置下拉列表的默认选项，以显示特定的默认值。本文将详细介绍如何在Element UI的select组件中设置默认值。 首先，我们来看看如何在Element UI的select组件中基本设置默认值。在...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
总的来说，解决el-select选择器无法显示选中内容的问题，通常需要从数据绑定、组件使用、样式设置等多个角度进行综合考虑。通过上述方法逐一排查并修复问题，一般能够找到导致问题的根本原因，并最终解决无法显示...
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
element-ui中select选择器，视图层只显示key值不显示label值；
ljmCSDN的博客
03-09 728
是由于值类型导致的；list列表中value值为字符串，而v-model绑定的值为number类型；
el-select下拉框修改功能回显label值失败解决方案
Komorebi_00的博客
01-10 2445
Select选择器下拉框回显label值失败解决方案 <!-- 下拉单选 --> <el-form-item label="部门经理" prop="manager"> <el-select v-model="ruleForm.manager" mutiple filterable clearable remote :remote-method="remoteMethod" :loading="userLoading" placeholder="请输入姓名或工号搜索(至少
解决＜el-select＞自定义option!只显示值不显示label!
TangMonk的博客
09-14 1305
应该将。
el-select 中v-model绑定值，数据回显只显示value，不显示label
热门推荐
ZMJ_QQ的博客
03-09 1万+
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的数据中
vue中在elementui对话框里使用Select 选择器，选中内容，重新打开对话框，Select 默认内容显示错误的问题
多看书少吃饭的博客
05-16 1825
vue中在elementui对话框里使用Select 选择器，选中内容，重新打开对话框，Select 默认内容显示错误的问题
设置elementUI中el-select的默认值
qq_43894292的博客
06-22 3379
select
element UI el-select 绑定值为对象时设置默认值
zuo-yiran的博客
01-12 1万+
适用场景描述：在项目中实现编辑功能时，如页面存在下拉框且下拉框的数据在点击相应的select时进行调用（ 在编辑时可能需要修改部分数据，而且存在部分下拉数据并不是必选项，如果直接获取所有的下拉数据，可能会造成浪费 ），需要在下拉框内显示已有的值作为默认值，如图所示（以官网给的数据为例）： 绑定值为字符串： 如果只是需要数据的单个值，例如：value时，直接把值绑定给value就可以。 代码： 页面代码： <el-select v-model="value" placeholder="请选择" @cha
vue里面的el-select绑定默认值
weixin_45048360的博客
03-17 8617
vue select下拉框绑定默认值： 首先option要加value值，以便v-model可以获取到对应选择的值 一、当没有绑定v-model，直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值 ...
vue解决el-select下拉框不显示label问题
weixin_46127011的博客
01-05 2680
最近在开发项目的过程中，遇到了这个问题。el-select的下拉框数据是后端返回的，当点击下拉框选项时会请求后端的接口，当在请求接口的过程中label是有显示的，但是在请求完成后，label就没有显示了。vue无法监听动态新增属性的变化，所以当向后端请求数据完成时，这时对应的v-model绑定的值是响应式的，这时候vue是无法监听到的。注：v-model绑定的值须是object.prop的形式。使用this.$set()方法。
el-select设置默认值
03-06
在Element UI中，el-select组件可以通过设置默认值来显示初始选项。有两种方式可以设置el-select的默认值： 1. 使用v-model指令：可以通过在el-select上使用v-model指令来绑定一个数据属性，该属性的值即为el-select的默认值。例如： ```html <el-select v-model="selectedValue"> <el-option label="Option 1" value="option1"></el-option> <el-option label="Option 2" value="option2"></el-option> <el-option label="Option 3" value="option3"></el-option> </el-select> ``` 在上述代码中，`selectedValue`就是用来存储el-select的默认值的数据属性。 2. 使用default-value属性：可以通过设置el-select的`default-value`属性来指定默认选中的选项的值。例如： ```html <el-select default-value="option2"> <el-option label="Option 1" value="option1"></el-option> <el-option label="Option 2" value="option2"></el-option> <el-option label="Option 3" value="option3"></el-option> </el-select> ``` 在上述代码中，`default-value`属性被设置为`option2`，因此初始时会默认选中label为"Option 2"的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值