使用Element-Ui的el-select组件无法选中回显的问题

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量1k 收藏
点赞数 2
分类专栏： elementui 前端 vue 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42232156/article/details/120266214
版权
前端 同时被 3 个专栏收录
266 篇文章 11 订阅
订阅专栏
vue
100 篇文章 5 订阅
订阅专栏
elementui
1 篇文章 0 订阅
订阅专栏

最近在实习开发中使用了Element-Ui的select组件,在选择上级科目下拉后出现了下拉无法回显的情况,但是在科目名称一填内容,上级科目马上就回显了的情况。

经过排查也并不是下拉框绑定的值有问题,最后是使用了Vue 官方提供了 vm.$forceUpdate() 方法才解决的。
此方法的作用是迫使 Vue 实例重新渲染。

解决代码:
在对应的select组件增加@change事件,事件对应为$forceUpdate()即可

 

 

 

短暂又灿烂的
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
element-ui中select组件绑定值改变,触发change事件方法
10-18
今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-Ui中el-select选择后无法选中
Alone_Endeavor的博客
04-13 3302
由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。受javascript的限制，vue。
elementUI之el-select选择器赋值为空后无法选中回显
weixin_42678822的博客
04-29 765
【代码】elementUI之el-select选择器赋值为空后无法选中回显。
使用Element-Ui的el-select组件遇到无法选中回显的问题
d_append的博客
07-10 5822
最近在实习开发中使用了Element-Ui的select组件,在选择上级科目下拉后出现了下拉无法回显的情况,但是在科目名称一填内容,上级科目马上就回显了的情况。 经过排查也并不是下拉框绑定的值有问题,最后是使用了Vue 官方提供了 vm.$forceUpdate() 方法才解决的。 此方法的作用是迫使 Vue 实例重新渲染。 解决代码: 在对应的select组件增加@change事件,事件对应为$forceUpdate()即可 小菜记录开发过程中的。 ...
vue element-UI 多个 select 回显成功，但是选中无反应
weixin_30527143的博客
07-31 797
参考文章 vue开发（四）element的select下拉框设定初值后，不能重新选择的问题 参考文章 element模态框dialog中的select组件中选中无反应 原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新 解决方案 添加 @change="$forceUpdate()" 强制更新视图 <el-select v-...
element-plus el-select选择器无法选中显示的内容
wy271013的博客
05-07 199
函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。今天使用element ui的下拉选择框组件时，发现选中了值却没有显示在框中。出现这个问题好像是因为下拉框数据是循环别的接口得来的，因为数据层次太多，在选中事件加上 this.$forceUpdate()强制刷新即可。
[element-ui]el-time-select组件回显错乱问题
xxuxioxx的博客
02-06 932
el-time-select组件回显错乱问题
element-ui select 组件，下拉框无法选中和回显数据的问题
qq_36437172的博客
06-28 2479
问题描述：在使用 Vue 框架 和 element-ui 库进行开发，对于页面中回显下拉框中数据时，我们对下拉框进行切换时，出现下拉框无法选中，同时页面中选中的值也未改变。 添加 change 事件获取选中的值，使用 Vue 2.x 版本的 vm.$set 进行强制更新视图，页面中选中的值未改变。 changeGoodsInfo (value) { this.$set(this.baseForm, 'goodsInfo', value) } 解决方案：change 事件，使用this.$..
【Element-Plus】el-select选择后不回显问题
qq_63514555的博客
06-15 1102
因此我们需要的是string类型，但是实际上我们给el-select绑定的是。Vue3 Element-Plus Setup语法糖。（object类型），导致一直绑定不上。到底还是setup语法糖不熟啊🤦‍♀️。el-select上面我们绑定的就是。首先说一下我用的技术。
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1196
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 513
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 290
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 333
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 466
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
element-ui中的el-select选择器分页后如何回显
07-13
在element-ui中，el-select选择器分页后，要实现回显可以通过以下步骤： 1. 首先，你需要在el-select中设置一个v-model属性来绑定选择的值。例如： ``` <el-select v-model="selectedValue" :options="options"></el-select> ``` 这里的`selectedValue`是一个用于存储选择的值的变量，`options`是一个包含选项数据的数组。 2. 然后，你需要在分页切换时，将选择的值保存下来。你可以监听el-select的change事件，在事件处理函数中将选择的值赋给`selectedValue`。例如： ``` <el-select v-model="selectedValue" @change="handleSelectChange" :options="options"></el-select> ``` ``` methods: { handleSelectChange(value) { this.selectedValue = value; } } ``` 3. 当切换分页后，你需要根据之前保存的选择的值来设置el-select的选中状态。你可以通过给el-select设置一个`value`属性来实现。例如： ``` <el-select v-model="selectedValue" :value="selectedValue" :options="options"></el-select> ``` 这样，当分页切换后，el-select会根据`selectedValue`的值来自动选中对应的选项。 通过以上步骤，你就可以在el-select选择器分页后实现回显功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值