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仅仅影响实例本身和插入插槽的子组件,而不是所有子组件