在添加操作时，el-select多选下拉组件，选中label标签后，框中无法回显选中的label,,,

最新推荐文章于 2024-02-21 09:04:54 发布
最新推荐文章于 2024-02-21 09:04:54 发布
阅读量471 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingrer/article/details/134313830
版权

在添加操作时，el-select多选下拉组件，选中label标签后，框中无法回显选中的label,,,

在使用el-select 组件出现一个小问题，对成功回显后的数据，再次进行添加，选框中没有更新，但是提交表单，实际数据是更新的。怀疑可能是视图层没有更新，组件化框架类似问题。

原因 ：下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新

解决方法：添加 @change="$forceUpdate()" 强制更新视图

小李很认真
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： data中定义： depS
el-select下拉框数据回显不上问题解决
最新发布
dy1717的博客
02-21 828
拉框数据回显不上问题
el-select选择了、输入框没有渲染数据、数据回显不上去
热门推荐
云
09-18 2万+
【代码】el-select选择了、输入框没有渲染数据、数据回显不上去。
vue element 编辑下拉框el-select不能回显的问题
小小爪哇工程师的博客
12-16 1万+
本人的需求是点击表格里面的编辑按钮，把数据回显到弹窗内，其他的都能回显，但是就下拉框不能正常的回显。大致意思是：v-model的值必须是一个数据变量，而不是一个条件值或计算值。本人后端人员，有不对的地方，勿喷。
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
element vue select选择器选择后不回显解决
weixin_65456815的博客
06-12 4003
vue+element开发使用el-select不能回显的处理方案
element框架select值更新页面不回显的问题，动态表单props绑定问题
qq_43628158的博客
07-01 4482
当data中默认没有定义form.region的值时，会出现选择select后input没有回显选择数据值；强制重新加载页面@visible-change=“$forceUpdate()”
项目中会遇到的问题，el-select组件不回显，数据多选保存空白问题
weixin_43204464的博客
10-24 3833
2.如果绑定正确，可能是属性值数据类型不正确，比如，我的问题就是后台el-option绑定的数组，里面的id是number类型，而这一条数据给的id、是string类型，所以不回显label，只回显value。1.检查属性是否绑定正确，比如value绑定的数据，是否和数组的：key一致。label是否绑定的是要回显的数据。
avue行编辑el-select选择数据后未回显
qq_38295468的博客
08-10 1787
很多时候后台传的number，但是我们的封装可能写成了string，就会找很久找不出来。很多时候，我们表单里面嵌套表格，表格里面又有表单；多层嵌套的情况下，就会导致prop值忘记写了，所以一定不要忘记加slot-scope=“{ row, index }”。有时候因为vue2双向绑定的原理导致无法完全监听数组，所以在刷新时无法回显，可以尝试用this.$set()方法去更新内容。关于avue-crud的使用过程中，遇到很多次在表格中编辑数据时，无法回显下拉数据；根据多次经验总结出几个原因；
element ui select下拉框不回显
weixin_43480441的博客
10-13 1014
element ui select 下拉不回显
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
Vue下拉框回显并默认选中随机问题
12-09
今天做vue的页面下拉框回显问题，回显数据是随机的，好奇怪，虽然多刷新 几下就可以了， 但是这个问题还是存在的，后来发现问题是 回显中的数据是两次请求，因为网络问题两次说不定哪个就请求的快一些， 因为调用的对象不一样，所以可能会不同，改为相同的之后，发现第一次请求的时间始终比第二次时间短一些，达到想要的效果 总结： 1.因为第一次加载下拉框列表的时候，请求列表中所有数据和列表默认回显数据不同，所以会出现被刷新，而出现回显随机问题，，， PS：vue 运用ElementUI,做select下拉框回显 第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ng-multiselect-dropdown：多选下拉组件
01-30
角度多选下拉菜单 Web应用程序的角度多选下拉组件。 易于集成和使用。 它可以绑定到任何自定义数据源。入门产品特点具有单/多选择选项的下拉菜单绑定到任何自定义数据源搜索带有自定义占位符文本的项目极限选择选择/...
el-select el-option未回显选中或显示value值
qq_30434271的博客
08-18 3266
问题分析：很有可能是由于数据类型不一致导致的，比如后台接口返回的字段类型为int，但前端el-option设置的value为String类型，因此只需要对后台接口返回的int值，进行一次int.toString()即可。
Element中el-select下拉框无法回显
fdyputi的博客
10-10 6898
使用elementUI时，在页面编辑时，下拉框回显数据有问题 这里主题类型默认选中类型为1的主题，并显示主题类型 <el-form-item label="主题类型" prop="subjectType"> <el-select v-model="form.subjectType" placeholder="请选择" clearable filterable> <el-option v-fo
el-select下拉框只回显value不回显label的原因以及解决方法
qickcao的博客
04-02 3906
el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，只需要在回显之前加上一行代码，将这个value转换成对应的类型即可，我这个里面需要的int类型，因此转成int就能回显正常。
el-select多选如何回显
02-20
el-select是Element UI中的一个下拉选择组件，可以用于单选或多选。当使用el-select进行多选时，回显已选项的方式有两种： 1. 使用v-model绑定一个数组，数组中存储已选项的值。例如，将v-model绑定到一个名为selectedOptions的数组上： ```html <el-select v-model="selectedOptions" multiple> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` 在data中定义selectedOptions数组，并初始化为已选项的值： ```javascript data() { return { selectedOptions: ['option1', 'option2'] } } ``` 这样，已选项会在页面加载时自动回显。 2. 使用value属性绑定一个数组，数组中存储已选项的值。例如： ```html <el-select :value="selectedOptions" multiple> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` 在data中定义selectedOptions数组，并初始化为已选项的值： ```javascript data() { return { selectedOptions: ['option1', 'option2'] } } ``` 这样，已选项会在页面加载时自动回显。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值