elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解与Cannot read property ‘level‘ of null问题

问题1：当点击切换第一个下拉菜单，第二个与之联动的cascader组件就会报Cannot read property ‘level’ of null ，如下图

 <el-cascader
            v-if="isTest"
            ref="locationCascader"
            @change="fnChangeChapter"
            v-model="chapterInfo"
            :options="chapterTree"
            :props="{
              value: 'id',
              label: 'name',
              children: 'list'
            }"
          />

原因分析：当我们切换第一个下拉菜单的选项的时候，第二个与之联动的数据会重新从后台获取， 即便设置了this.chapterInfo= [] ，但是cascader中的activePath还是未变动之前的值，也就是点击的父节点会被记录下来，加载到新数据的时候，activePath在新数据中找不到对应的，就会报错。

解决办法：我们可以在拉取新数据之前把activePath置空为空数组[]，亲测有效具体如下

 resetChapterData() {
      this.chapterInfo = [];
      if (this.$refs.locationCascader) {
        this.$refs.locationCascader.$refs.panel.activePath = [];
      }
    },

问题2：有时候可能在项目中可能需要设置成缓存中的选项，当我设置成新的之后，回显中的更新了，但是下拉选项中没有更新

原因：当我们更新cascader中chapterInfo之后，但是activePath中的值还是之前选中的，因此在设置chapterInfo之前，需要把activePath置为空[]

解决办法：我们可以在设置新数据之前把activePath置空为空数组[]，亲测有效具体如下

  setValue() {
      this.$refs.locationCascader.$refs.panel.activePath = [];
      this.chapterInfo = ['38be4ffeb5039431', 'd67f4b618f0d9ed4', '4abb431f8a7ebefb'];
    },
下面两行代码 当在此点出浮窗，可以回显到上次选择的路径
 this.$refs.area.panel.activePath = [];
 this.$refs.area.panel.syncActivePath();

减少踩空，人人有责。