vue+elementUI的select下拉框回显为数字

进击的Rex.

已于 2022-09-27 20:11:16 修改

阅读量1.7k

点赞数 1

分类专栏：工作问题文章标签： elementui vue.js 前端

于 2022-09-27 20:10:23 首次发布

本文链接：https://blog.csdn.net/weixin_43678515/article/details/127077459

版权

工作问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

后端传送数据给前端后,下拉框回显结果为数字!

最近遇到个问题后端返回结果后.前端双向绑定回显结果为数字.分析原因后发现是数据类型不一致导致回显异常
在这里插入图片描述

解决方案:
把option的value转为字符类型即可
:value="dict.id+''"

解决后效果:
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

进击的Rex.

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue+elementUI的select下拉框回显为数字

最近遇到个问题后端返回结果后.前端双向绑定回显结果为数字.分析原因后发现是数据类型不一致导致回显异常。把option的value转为字符类型即可。
复制链接

扫一扫

专栏目录

Vue下拉框回显并默认选中随机问题

10-18

主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

解决element ui select下拉框不回显数据问题的解决

10-17

解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...

1 条评论您还未登录，请先登录后发表或查看评论

【vue】下拉框回显的是数字却不是中文

cflydk的博客

06-01

2005

场景：前端新增的时候显示为中文，但点修改的时候，回显的却是数字

Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法_element select多选第一次回显不上,点击别的输入框回显正常(2)

2301_82241847的博客

05-16

436

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家题以及学习路线给大家**[外链图片转存中…(img-BbpWTdhg-1715842613050)]

vue+elementUI下拉框回显问题解决

weixin_47390965的博客

04-25

9456

在开发过程中, 总会做到修改功能, 但是在修改回显的时候, 发现下拉框始终回显的是id而不是文本,下面看案例

vue element select下拉框回显展示数字

weixin_44021888的博客

07-18

4727

vue element select下拉框回显展示数字

vue 运用ElementUI,做select下拉框回显

XYLH2015的博客

03-23

3926

第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。第二、要保证select下拉的ID和v-model里边的id保持一致。第三、elementUI就会自动的将数据回显了。一下是截图：转载于:https://www.cnblogs.com/xiaomili/p/6607627.html...

vue element-ui下拉框回显失败问题解决

qq_60349857的博客

10-10

614

原因：value格式不对数字类型和字符串类型没办法回显 “0” 0。把value转换为Number属性，问题解决。

Vue+Element+Select下拉框回显后无法再次选择修改

weixin_44711440的博客

11-30

2342

Vue+Element+Select下拉框回显后无法再次选择修改

vue+element ui的下拉框回显问题

weixin_44188501的博客

09-07

2937

最近在使用vue+element ui做下拉框回显的时候遇到了一个错误。下拉框列表正常显示，我要回显的话就要给绑定的model属性赋一个标签中对应的:value的值，但是奇怪的是下拉框没有回显而是显示了model属性的值。一开始以为是我查询出来的数据不对劲，我打印出来没看出有什么问题。百思不得其解。检查发现也不是vue生命周期的问题。后来静下心仔细看了一下，发现我:value的值是字符串，而回显赋值给model属性的是数字。把model绑定的属性值改成字符串后完美解决。 ...

vue+element 多选下拉框的传值及回显

Humor_L的博客

06-01

7482

给select下拉框添加多选属性multiple 1、多选下拉框传值：定义hostTypelist数组，传值时： 2、多选下拉框回显因为要回显，所以回显的格式与之前保持一致（要数组形式），在最后循环的时候不能用刚开始定义的hostTypelist数组去接收，此时能回显出个数，但是显示内容是重复的，仔细思考这儿回显循环的到底是什么。最后要的是hostid。

elementui 下拉框回显_解决element ui select下拉框不回显数据问题的解决

weixin_33788424的博客

01-26

2572

最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶在项目中用到 el-select 时遇到一个问题，...

解决layui 三级联动下拉框更新时回显的问题

12-10

最近接触layui，比较简洁美观的一款ui，但也有很多小坑，记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

在Vue.js开发中，ElementUI是一个非常流行的前端组件库，它提供了丰富的UI组件，如Select和Cascader，用于构建用户界面。然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时...

vue2和el-input无法修改和写入，并且不报错

最新发布

呆萌小新@渊洁的博客

07-24

410

由于orginParams初始化为 originParams:{}.造成originParams被赋值时，属性均为动态型。虽然可以通过这种方式让父子数据交互，但可以发现，子组件的v-model接收对象，和props.row的交互逻辑异常麻烦。看过相关的很多内容，大部分集中在说需要添加$forceUpdate.而我根本不行。但我的业务中可以发现，进行了多层匿名子组件嵌套。上述内容中经测试，数据回显异常，程序不报错，无法显示输入变化，但是数据可以被正常修改。在我所在的业务场景中。业务中原本使用动态方式，

TreeSelect增加可筛选功能

qq_43048011的博客

07-24

851

应用到本地项目本地tree数据结构

【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

bbt953的博客

07-24

303

记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

vue3——利用自定义指令实现下拉框分页懒加载

zmy967131的博客

07-24

362

vue3——利用自定义指令实现下拉框分页懒加载

Vue3+ElementUI el-select 下拉框多选，下拉框里回显多选的数据

06-10

在Vue3+ElementUI中，可以通过v-model指令来实现el-select下拉框的多选，同时可以通过设置el-option的selected属性来实现在下拉框中回显多选的数据。首先，在数据模型中定义一个数组属性来存储多选的值，例如： ```javascript data() { return { selectedValues: [] } } ``` 然后，在el-select中设置v-model为这个数组属性，并将multiple属性设置为true，例如： ```html <el-select v-model="selectedValues" multiple> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 这样，在多选下拉框中选择的值就会被存储在selectedValues数组中，同时el-option的selected属性会被自动设置为true或false，以反映当前选项是否被选中。如果需要在下拉框中回显已经选中的数据，可以使用v-for指令循环遍历selectedValues数组，然后在el-select中设置v-slot的方式来自定义选项的内容。例如： ```html <el-select v-model="selectedValues" multiple> <template v-for="value in selectedValues"> <el-option :key="value" :label="value" :value="value" :selected="true"> <span>{{ value }}</span> </el-option> </template> </el-select> ``` 这样，selectedValues数组中已经选中的值就会以自定义的方式显示在下拉框中。需要注意的是，为了避免重复，需要为v-for循环的每个元素设置一个唯一的key属性。