vue+element 级联菜单实现动态懒加载

官方文档给的api

// 1：html代码块

 <el-cascader @change="workUnitChnge"
              v-model="workUnitArr"
              :options="workUnitList"
              :props="cascaderProps"
              :placeholder="expertApplicationData.workUnit || '请选择'"
               clearable>
 </el-cascader>

// 2: js代码部分（ts）

  说明：1:进入页面首先加载顶层数据（第一级数据放入list里）
        2：如果层级不固定有多少层级最后后端返回一个字段代表当前级是否有下级数据来显示当前级是否可 
          展开（leaf：true/false）
        3：如果固定只有三级那么下边case到2为止
        4： this.commonSystemSrv.getDeptTree 后端接口
 
  get cascaderProps() {
    return {
      value: 'id',
      label: 'name',
      lazy: true,
      lazyLoad: this.lazyLoad
    };
  }
  async lazyLoad(node, resolve) {
    const level = node.level;
    let result;
    switch (level) {
      case 0:
        result = this.workUnitList;
        result.forEach(item => {
          item.value = item.id;
          item.label = item.name;
          item.leaf = item.childNum === 0 ? true : false;
        });
        resolve(result);
        break;
      case 1:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      case 2:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      case 3:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      case 4:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      case 5:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      case 6:
        this.commonSystemSrv.getDeptTree(node.data.id).then(res => {
          result = res;
          result.forEach(item => {
            item.value = item.id;
            item.label = item.name;
            item.leaf = item.childNum === 0 ? true : false;
          });
          resolve(result);
        });
        break;
      default:
        break;
    }
  }