关于element-UI的el-select下拉框数据回填显示的id问题

置顶 已于 2022-01-25 10:00:24 修改
阅读量7.6k 收藏 13
点赞数 7
文章标签： elementui 前端 javascript
于 2022-01-25 10:00:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SYXZSs/article/details/122679549
版权

问题如图： 三个form-item都是使用el-selece，但是责任人一栏却显示为id
在这里插入图片描述
问题情况 是后台返回的数据类型的原因。

我在接口获取的function里 循环责任人的id，打印类型为number。此时以这样的情况可以判断为id应该属于String类型。

在这里插入图片描述

如下图：我使用map更改原数组，使其id转为String再重新赋值给id。整个数组再赋值给空数据，这样再绑定el-select就不会出现数据回填显示id的情况了！

在这里插入图片描述

更改后得效果图

在这里插入图片描述结束！

不要睡觉哦i
关注
  • 7
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Element-ui里Select 选择器常用的属性和数据回填
yuanxinwyc的博客
04-02 3943
label属性绑定的下拉框要显示内容如下图 el-select里change事件，在下拉框选取数据时候触发的事件，会有一个返回的参数，就是 el-option里value的值，value绑定的groupId 触发下拉框选择事件，打印结果 el-select里v-model属性绑定的值就是当前el-option里value的值,打印结果如下 数据回填：根据el-option里value绑定的groupId进行回填，点击弹框的时候通过事件传入需要的group...
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
element，下拉，渲染，传的id，展示id，不展示name
zxp_smile的博客
03-17 1074
（1）传的id，在下拉数组里没有对应的id （2）传的id，格式不对，不是int类型，就会只展示id，不展示相对应的name
el-select回显数据，本来应该显示label的值，结果显示的是id值
weixin_45534301的博客
08-17 2935
解决方法：在调基本信息的接口中将回显的数据的数据类型转成数字类型。3）.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。解析一个字符串并返回一个数字。将字符串值乘以1不会改变值，并且默认情况下它会转换为数字。1）.如果是纯数字的字符串，则直接将其转换为数字。2）.如果字符串中有非数字的内容，则转换为NaN。下拉选框调的后端接口，返回的id时数字类型的，回显数据对应的id值是字符串类型的。null --> 数字 0。6.双波浪号 (~~) 运算符。3.使用一元运算符 (+)
Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法_element select多选第一次回显不上,点击别的输入框回显正常(2)
最新发布
2301_82241847的博客
05-16 403
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家题以及学习路线给大家**[外链图片转存中…(img-BbpWTdhg-1715842613050)]
Vue Select下拉框控件异常显示id，亲测有效
鸣的博客
04-26 1409
dishList 里面的id和绑定的值dishname字段类型要一致 <template slot-scope="scope" slot="dishNameForm"> <el-select v-model="form.dishName" placeholder="请选择" @change="dishNameChange()" @click.native="selectdishClick()"> <el-option
【element Vue】＜el-select＞回显问题，应该回显 label 却只显示了id
热门推荐
AAAXiaoApple的博客
06-08 1万+
回显问题，应该回显 label 却只显示了id
element UI select下拉框数据回显
zhaluo_dehezi的博客
08-19 1万+
首先你需要提前查询下拉框所需要的数据: initItem = [ {id:1,name:'张三',age:18}, {id:2,name:'李四',age:18}, {id:3, name:'王五',age:18}, ] 然后从element UIcpoy 一段下拉框的代码: <el-select v-model="f...
el-select的某一项选中后显示id
zhangyu_98的博客
09-22 580
el-select的某一项选中后显示id
vue+element-ui select必填项验证回显问题+实现重置表单内容
qq_45726323的博客
09-03 2852
今天在做页面的时候，需要含有两个form表单，表单的内容以及验证信息的重置。但是在做必填项的时候，我发现关闭页面再打开会回显红色。
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
element-ui select多选绑定回显值
weixin_44876807的博客
07-05 5800
这是要最后实现的效果。 <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @change="unitChange" > <el-option v-for="item in jzmcOption" :key="item.unitId" .
vue解决el-select下拉框显示ID不显示label问题
goldsmith的博客
03-11 1323
vue解决el-select下拉框显示ID不显示label问题
elementui遇到的问题 ——el-select
ZMH的博客
10-12 1311
el-select 默认值显示value不显示label问题 可能时因为我们传参数进去的value此刻为数字型的，而el-select的value是字符串型的，对应不上，所以无法显示label，只需将传的参数转换为字符型就好 newData.type = newData.type.toString(); //将数据里的type转换为字符串，下拉框才可根据这个value显示对应label 检测到有值的变化，但是label不显示 可能是select组件动态绑定的那个值写的太深了（如绑定到的是computed
EL表达式截取字符串
helen.jar
12-22 528
&lt;%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"% &gt; ${wjcd.lrsj}原来得到的是如2006-11-12 11:22:22.0 ${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)...
Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案
weixin_45084986的博客
04-04 4518
本文主要记录多选操作 Element-ui官网参考 一、像下面这样直接使用，页面选择下拉列表数据，页面时不会更新的 <!-- 表格区开始 --> <el-table size="mini" :data="tableData" style="width: 98%"> <el-table-column label="select" width="100"> <!-- <template slot-scope="scope"> -->
el-select回显
江黎
12-14 1741
【代码】el-select回显。
vue中的select选择器问题
m0_68269137的博客
10-17 477
vue elementui 问题总结
写一个vue 和 element-ui 点击el-select下拉框出发el-tree勾选的代码
04-05
<template> <div> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-tree :data="data" :props="defaultProps" ref="tree" /> </div> </template> <script> export default { data() { return { selected: '', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ], data: [ { label: 'Level 1', children: [ { label: 'Level 1-1' }, { label: 'Level 1-2' }, { label: 'Level 1-3' }, ], }, { label: 'Level 2', children: [ { label: 'Level 2-1' }, { label: 'Level 2-2' }, { label: 'Level 2-3' }, ], }, ], defaultProps: { children: 'children', label: 'label', checked: 'checked', isLeaf: 'isLeaf', }, } }, methods: { handleChange() { this.$nextTick(() => { const tree = this.$refs.tree const node = tree.getNode(this.selected) if (node) { tree.setChecked(node.data, true) } }) }, }, } </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值