vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
·
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
情形一:vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值
<el-select
v-model="inquire.selectData" filterable placeholder="请选择" @change="linkChange">
<el-option
v-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仅仅影响实例本身和插入插槽的子组件,而不是所有子组件
更多推荐
已为社区贡献3条内容
所有评论(0)