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 值;


相关文章
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
2296 0
|
前端开发
解决el-descriptions的label-class-name不生效问题
解决el-descriptions的label-class-name不生效问题
1513 0
|
JavaScript 前端开发 C#
Select 下拉框切换拦截的三种方案|【Proxy】
Select 下拉框切换拦截的三种方案|【Proxy】
2155 0
|
JavaScript API C++
Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范 其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范 1.
17724 0
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
3059 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
ElementPlus 之 el-select 多选实现全选功能
本文介绍了在ElementPlus框架中,如何通过自定义事件处理和条件判断实现`el-select`多选控件的全选功能。
1854 1
ElementPlus 之 el-select 多选实现全选功能
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
11月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3860 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
前端开发
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}