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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐