1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法

vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法

时间:2022-09-23 21:28:26

相关推荐

vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法

vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法

情形一:vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值

<el-selectv-model="inquire.selectData" filterable placeholder="请选择" @change="linkChange"><el-optionv-for="(item, ind) in selectList" :key="ind":label="item.mc ":value="item.dm"></el-option></el-select>linkChange(val){if(val){//this.set(原数组, 索引值, 需要赋的值)this.$set(this.inquire,this.inquire.selectData,val)}else{this.$set(this.inquire,this.inquire.selectData,"")}}

情形二:render函数没有自动更新,需要用forceUpdate强制刷新render

如果下拉框数据是循环别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新render。(今天还遇到这样一种情况,select下拉选值选中,但是不显示,如果鼠标触发一下其他非select的form表单如input输入框,则刚才选中的值就会显示)针对这种情况加了forceUpdate可以解决,想来原理应该也是如此。

在select的@change事件加上 this.$forceUpdate()强制刷新即可。注意:forceUpdate仅仅影响实例本身和插入插槽的子组件,而不是所有子组件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。