element-ui使用Cascader 级联选择器遇到的坑

按照官网给的教程使用，当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误

然后在在网上查看原因：

分析

这个错误的原因是当选择后，再更新内容时，选择器仍会关联原来的数据，导致找不到之前选择的元素。

解决

所以可以采用 重新渲染 的方式解决这个问题。

给cascader设置一个key，改变类型时也改变key值，key值改变了，cascader就会重新渲染

			<el-cascader
              :key="refresh"
              :options="modelList"
              v-model="modelValue"
              :props="{ value: 'id', label: 'name', children: 'children' }"
              filterable
              @change="changeModelMethod"
              clearable
            >
            </el-cascader>

export default {
  data() {
    return {     
      refresh: 0,// 重新渲染级联选择器
	  modelValue: [],
      modelList: [], // 模型列表     
    };
  },
 
  watch: {
  //监听Cascader 级联选择器绑定的值，如果值改变了，就改变Key值，达到重新渲染的效果
    modelValue: {
      handler(newVal) {
        ++this.refresh;
      },
      deep: true,
    },
   
  },
  methods: {
    // 选择添加的模型
    async changeModelMethod(value) { 
    },
  },
};