【Bug日记】Element-UI级联选择器el-cascader报错Cannot read property level of null

🐛【Bug日记】 Element-UI级联选择器el-cascader报错Cannot read property level of null

🐞问题描述

使用element-ui 级联选择器el-cascader，其数据源options需要根据用户操作·动态切换·，此时若没有进行级联选择操作，动态切换options不会产生错误，一旦用户进行了级联选择，那么下一次切换options数据源时便会报错TypeError: Cannot read property 'level' of null*

📌 问题原因

• 动态切换options时，在新的options无法找到用户选中的值进而导致错误

---

举个栗子🤞，在初始options中用户选择了key为"001"的数据，此时动态更改了options数据，而新的options中不存在key为"001" 的数据就会导致级联选择器报错。

🏁解决办法

• 当用户切换options数据时，重新渲染el-cascader组件
  • 给级联选择器绑定 key 值
  • 通过 watcher 监听options变化
  • 当options变化时，改变key值，进而实现组件重新渲染
• 程序实现如下：

<el-cascader
   :key="refresh"      
   placeholder="请选择父节点"
   clearable
   v-model="form.parentid"
   :options="tree"
   :props="{ expandTrigger:'hover',value:'funid',label:'funname',checkStrictly:true}">
</el-cascader>
   					

watch:{
   	curentTree:function(newVal,oldVal){
   		this.refresh = newVal.funid;
   	}
   },

---

（完）