前言：需求是只有一级联级，之后通过id获取下级，还是多个人可选，新增后要回显以便修改

<el-cascader
    :disabled="disabled"
    :options="optionsList"
    :props="cascaderProps"
    clearable
    style="width:100%"
    @change="handleChange"
    v-model="activeUserCode">
</el-cascader>
props: {
    option: {
      type: Array,
      default: () => [],
    },
    userId: {
      type: Array,
      default: () => [],
    },
    disabled:{
      type:Boolean,
      default:true
    },
    isNumber:{
      type:Boolean,
      default:false
    }
  },
  data() {
    const _this = this;
    return {
      // 避免直接修改props
      activeUserCode: this.userId,
      optionsList: [],
      allCascader:[],
      cascaderProps: {
        multiple: true,
        value: 'id',
        label: 'label',
        children: 'children',
        lazy: true,
        lazyLoad(node, resolve) {
          _this.lazyLoads(node, resolve);
        }
      },
    };
  },
  methods: {
    async lazyLoads(node, resolve) {
      if (node.level === 0) {
        // 判断是否回显 如果this.valueList>0 代表需要回显，调用formatting 如果不回显直接调取一级数据resolve回去。  
        if (this.activeUserCode.length > 0) {
          // 判断是否回显
          this.formatting();
        }else {
          let res = this.option;
          resolve(res);
        }
      }else {
        let list = this.activeUserCode;
        //如果有children 证明有子集可以继续调取 
        if (!node.data.children) {
          let res = await this.getChild(node.data.id);
          
          setTimeout(() => {
            // 模拟接口
            resolve(res);
          }, 100);
        }else {
          resolve([]);
          // return false
        }
        // 先合并在去重
        this.activeUserCode = [...new Set([...this.activeUserCode, ...list])];
      }
    },
    formatting() {
      // 拿一级数据 根据 this.valueList去判断哪些一级数据需要回显
      let parentsIds = [];
      this.activeUserCode.forEach(el => {
        parentsIds.push(el[el.length - 2]);
      });
      parentsIds = [...new Set(parentsIds)];
      parentsIds.forEach(sitem => {
        this.getOther(sitem);
      });
      // 递归判断
    },
    findItem(list, arr, id) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          list[i].children = arr;
        }
        if (list[i].children) {
          this.findItem(list[i].children, arr, id);
        }
      }
      return list;
    },
    //获取子集数据
    getChild(value) {
      return new Promise((resolve,reject) => {
        let _this = this;
        let arr = [];
        接口请求.then((res) => {
          (res.obj.verifyList).forEach(item => {
            arr.push({
              id: item.userName,
              label: item.nickName,
              leaf: true
            });
            _this.allCascader.push(
              {
                userCode: item.userName
              }
            );
          });
          resolve(arr);
          this.$emit('getAllCascader',_this.allCascader);
        });
        
        
      });
      

    },
    //获取子集数据
    getOther(value) {
        let _this = this;
        let arr = [];
        接口请求.then((res) => {
          (res.data).forEach(item => {
            arr.push({
              id: item.userName,
              label: item.nickName,
              leaf: true
            });
            _this.allCascader.push(
              {
                userCode: item.userName
              }
            );
          });
          this.findItem(this.option, arr, value);
          setTimeout(() => {
            this.optionsList = this.option;
          }, 100);
          this.$emit('getAllCascader',_this.allCascader);
        });
    },
    handleChange(el) {
      this.activeUserCode = el;
      if (this.activeUserCode.length > 5 && this.isNumber) {
        this.$message({
          message: '每个节点最多支持5人',
          duration: 1500,
          type: 'warning'
        });
        this.activeUserCode = this.activeUserCode.slice(0, 5);
      }
      
      this.$emit('handleChange',this.activeUserCode);
    }
  }