el-cascader级联选择器使用记录2

项目场景：

el-cascader级联选择器下拉框默认展开所有子项

---

解决方案：

1.使用ref获取DOM元素 + 级联组件的监听事件

1.新建一个ref ，获取下拉菜单数据集合；

<el-cascader
    ref="cascader"
    :options="options"
    :props="{ checkStrictly: true }"
    :visible-chang="visibleAllData"
    v-model="isEliminate"
    clearable>
</el-cascader>

2.监听下拉框出现时 改变要显示的数据集；

 visibleAllData(val) {
      if(!val) return;
      // 首次打开下拉框，未选择数据
      if(!this.isEliminate){
        this.$nextTick(()=>{
          //获取菜单数据
          let dataMenu = this.$ref.cascader.panel.menus;
          // 获取要展示的子项（任务中/任务后）
          let child = data[0][1].children;
          // dataMenu[0]原本的展示的一级菜单（全部/是/否）
          let arr = [];
          arr.push(dataMenu[0]);
          arr.push(child);
          this.$ref.cascader.panel.menus = arr;
        })
      } 
    }, 

3.回显数据的bug 

 // 回显数据 数据为否或者全部时 不显示子项
  if(this.isEliminate.length>0 && this.isEliminate.length<2){
      let arr2 =[];
      // 获取一级选项菜单（全部/是/否）
      arr2.push(this.$ref.cascader.panel.menus[0]);
      this.$ref.cascader.panel.menus = arr2;
   }