el-cascader级联选择器-懒加载+多选+回显功能

前言：需求是只有一级联级，之后通过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);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163