el-select 数据回显,只显示value不显示lable

简介: el-select 数据回显,只显示value不显示lable

主页面

20210527153548522.png

点击actions,把当前VIPGrade ID传过去

20210527153548522.png

这个时候我们可以看到,select List是有数据的,但是为什么只显示value,并没有显示label呢?

20210527153548522.png

这个时候我们打印一下,从主页面传入的 id 是什么类型,再看一下我们的 list 里面的id是什么类型

20210527153548522.png

通过控制台我们可以看到,主页面传入的id 是String类型的,而我们 list 的 VIPGraded 是Number类型的,看到这里我们就知道原因了;

20210527153548522.png

我们在数据回显 重置的我们 VIPGradeID 的时候,把类型转换一个即可

再看效果图

20210527153548522.png

此时我们已经看到,数据回显时,就可以绑定上对应的 ID 值,并且显示对应的Label 值;


相关文章
|
6月前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
202 1
|
2月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
37 2
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
707 1
|
6月前
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
559 1
|
6月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
139 0
通过id给input框和div赋值,修改属性值。
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
658 0
el-select下拉多选框 el-select 设置默认值不可删除功能
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
710 0