element-ui的el-select如何回显value对应的label值

最新推荐文章于 2024-05-20 13:41:14 发布
最新推荐文章于 2024-05-20 13:41:14 发布
阅读量2w 收藏 4
点赞数 6
分类专栏： web前端 element UI

写在这里只为一个记录，感谢原作者分享，原作者地址：https://segmentfault.com/a/1190000016737140?_ea=4798728

原因是value的格式存在问题，数据库读取到的数据不一定为number或string类型
需要自己转换一下

总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可

即：option的value值如果为number，保存后从后台拿到的值需要转为number类型；如果为string，则需要转为string类型才能回显成功

辣姐什么鬼
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui中select组件绑定值改变,触发change事件方法
10-18
今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
el-select值的回显问题：如何使element-ui的下拉框显示label值
m0_61689817的博客
04-04 3080
查阅大量资料，突然发现一个简单的方法，那就是vue的v-bind的神奇之处，v-bind的简写是：冒号。今天又解决了一个问题，开心值加1。所以解决方法就来了（敲重点）在value上绑定v-bind。改完之后的代码是这样的，再来看。
解决el-select回显value，不显示lable，以及之后不能操作的问题
qq_45779588的博客
04-11 525
el-select v-model="addData.classifyIdsList" placeholder="请选择" multiple @change="$forceUpdate()">不能操作 加@change="$forceUpdate()"
Element中Select选择器value-key使用注意事项以及回显
最新发布
个人学习笔记
05-20 557
value-key 的值必须是对象中一个唯一的标识，类似于:key的意义，但是可以不跟Key一样，一般用一样的即可。因为选择的是一个对象，回显时也应该是一个对象，对象中至少有id，用于与value-key进行匹配。
vue 项目element-ui 表格展示数据转换成中文
月影神社
09-10 2256
很多时候后台字段返回的数据是数字，需要前端将它转成中文显示。直接看代码 如遇到需要展示负数或者其它情况，用{{}}获取展示数据。 新手一枚，多多支持啦！
【element Vue】＜el-select＞回显问题，应该回显 label 却只显示了id
热门推荐
AAAXiaoApple的博客
06-08 1万+
回显问题，应该回显 label 却只显示了id
el-select回显、el-checkbox-group回显
haliboti的博客
10-29 3236
el-select回显、el-checkbox-group回显 1、el-select回显 ！注意：回显需要:value的值和v-model的值 === （全等于），意思就是类型也必须相同。 <el-form-item prop="reportDate" label="周报生成日期"> <el-select v-model="form.reportDate" clea
el-select回显
i_am_a_div的博客
06-16 1244
<el-select style="width:162px;" @change="aaa" v-model="searchObj.id" placeholder="请选择"> <el-option v-for="item in optionsId" :key="item.value" :label="item.value" :value="item.label"> </el-option> ...
le-select 下拉框多选数据回显
lhy2018212704的博客
08-04 2753
le-select 下拉框多选勾选后传给后端的是一个数组。（数组中包含了用户选择的所有选项的值。每个选项的值可以是一个字符串、数字或其他类型的数据，具体取决于选项的定义）。在el-select中增加一个@change事件监听器（当用户在下拉列表中选择一个新的选项时，@change事件会被触发，并且会将选中的值作为参数传递给事件处理函数。要求数据库中supportPayType字段的数据类型是String(1：原生 2：UPIPay 3:唤醒 )这时下拉框不能回显和修改。
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`:props`用于指定每一级的`value`、`label`和`children`字段，分别对应值、显示文本和子级数组。 ```html <el-cascader v-model="ruleForm.censusLand" :options="cascaderData1" :props="{ value: 'id', label:...
el-select 下拉框选择后获取label值，用value返回list对象数组中的对应的label
11-25 1439
el-select 下拉框选择后获取label值，用value返回ist对象数组中的对应的label。
关于element UI 下拉选项select 绑定值无法翻译后回显
weixin_43045869的博客
11-18 651
在做 select 组件下拉回显时，后台返回的选项 id 值有的是 字符串类型：id : ‘1’，而elementUI 做了严格判断类型必须是number类型。
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 4819
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
element-ui中select的坑
想成为大神的小白
09-21 7518
element-ui中的select下拉框，其中的选中项option是通过select中的v-model监听的变量来和option中的value(一般是id)进行匹配，如果匹配成功，则把相对应的label显示到select框中。 其中，v-model所监听的变量数据类型一定要是Number类型，如果是String类型则无法进行匹配，则会将接收到的String类型的字符串原样输出到页面上。 ...
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实现上传图片并回显图片
05-20
el-select 是 Element UI 提供的下拉选择器组件，本身并不支持上传图片并回显图片的功能。你可能需要结合其他 Element UI 组件，如 el-upload 和 el-image，来实现这个功能。 以下是一个示例代码，可以实现在 el-select 中选择图片上传，并在下拉框中回显图片： ```html <template> <el-select v-model="selectedImg" placeholder="Select image"> <el-option v-for="(img, index) in images" :key="index" :label="img.name" :value="img.url"> <el-image :src="img.url" :fit="fit" /> </el-option> <el-option> <el-upload class="upload-demo" :action="uploadUrl" :show-file-list="false" :on-success="handleSuccess" > <el-button size="small" type="primary">Click to upload</el-button> </el-upload> </el-option> </el-select> </template> <script> export default { data() { return { images: [ { name: 'Image 1', url: 'https://via.placeholder.com/150' }, { name: 'Image 2', url: 'https://via.placeholder.com/150' }, { name: 'Image 3', url: 'https://via.placeholder.com/150' }, ], selectedImg: '', fit: 'cover', uploadUrl: '/api/upload', // replace with your own upload API URL }; }, methods: { handleSuccess(res) { this.images.push({ name: res.name, url: res.url }); }, }, }; </script> ``` 这个示例中，我们使用 el-option 组件来展示图片，并在其中嵌入 el-image 组件来显示图片。同时，在最后一个 el-option 中，我们使用 el-upload 组件来实现上传图片功能。上传成功后，会调用 handleSuccess 方法将新上传的图片信息添加到 images 数组中，从而实现图片的动态更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值