elementui中el-select和el-tree实现下拉树形多选功能

实现效果如下：

代码如下：
html中

   
                          
                            

                            
                              

                                我所在的部门:{{myDepart.name}}
                              
                              

                                全选
                              
                              
                                
                                  
                                    {{ data.name }}
                                
                              
                            
                            
                          
                        
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

data中

   valueName: [],
      valueMultiple: [],
      choosedValue: [],
      mychecked: true,
      allchecked: false,
      myDepart: {
        id: 9,
        name: "三级 1-1-1",
      },
      data: [
        {
          id: 1,
          name: "一级 1",
          children: [
            {
              id: 4,
              name: "二级 1-1",
              children: [
                {
                  id: 9,
                  name: "三级 1-1-1",
                },
                {
                  id: 10,
                  name: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "一级 2",
          children: [
            {
              id: 5,
              name: "二级 2-1",
            },
            {
              id: 6,
              name: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          name: "一级 3",
          children: [
            {
              id: 7,
              name: "二级 3-1",
            },
            {
              id: 8,
              name: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        value: "id",
        children: "children",
        label: "name",
      },
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

mounted中

this.choosedValue=[]
    this.choosedValue.push(this.myDepart.id)
     this.$refs.tree.setCheckedKeys(this.choosedValue);
1
2
3

methods中

 // 选择所属部门
    myDepartChage(val){

      if(val==true){
        if(this.choosedValue.indexOf(this.myDepart.id)==-1){
          this.choosedValue.push(this.myDepart.id)
        }
        this.choosedValue=[...new Set(this.choosedValue)]
        this.$refs.tree.setCheckedKeys(this.choosedValue);
      }else{
      
       if(this.choosedValue.indexOf(this.myDepart.id)!=-1){
         this.choosedValue.forEach((item,index)=>{
          if(item==this.myDepart.id){
            this.choosedValue.splice(index,1)
          }
         })
        }
          this.choosedValue=[...new Set(this.choosedValue)]
        this.$refs.tree.setCheckedKeys(this.choosedValue);
      }
    },
       // 全选
    myAllChage(val){
     if(val==true){
        this.mychecked=true
          this.data.forEach((item, index) => {
            this.choosedValue.push(item.id)
          });
        this.choosedValue=[...new Set(this.choosedValue)]
        this.$refs.tree.setCheckedKeys(this.choosedValue);
     }else{
      this.mychecked=false
      this.choosedValue=[]
      this.$refs.tree.setCheckedKeys([]);

     }
    },
    // 点击树形选择节点
    handleNodeClick(node, checked) {
      if (checked) {
        if (node.children == null || node.children == undefined) {
         if(node.id==this.myDepart.id){
          this.mychecked=true
         }
          let num = 0;
          this.valueName.forEach((item) => {
            item == node[this.defaultProps.label] ? num++ : num;
          });
          if (num == 0) {
            this.valueName.push(node[this.defaultProps.label]);
            this.choosedValue.push(node["id"]);
              this.choosedValue=[...new Set(this.choosedValue)]
               this.valueName=[...new Set(this.valueName)]
          }
        }
      } else {
        if (node.children == null || node.children == undefined) {
          this.valueName.map((item, index) => {
            if(node.id==this.myDepart.id){
              this.mychecked=false
            }
            if (node.name == item) {
              this.valueName.splice(index, 1);
            }
          });
          this.choosedValue.map((item,index)=>{
            if (node.id == item) {
              this.choosedValue.splice(index, 1);
            }
          })
        }
      }
      console.log(this.choosedValue)
      console.log(this.valueName)
    },
    // 删除单个标签
    changeValue(val) {
      const a = this.findItemByName(this.data, val);
      if(a.id==this.myDepart.id){
        this.mychecked=false
        this.choosedValue.forEach((item, index) => {
        if (item == this.myDepart.id) {
          this.choosedValue.splice(index, 1);
        }

      });
      }
      this.choosedValue.forEach((item, index) => {
        if (item == a.id) {
          this.choosedValue.splice(index, 1);
        }

      });
      this.$refs.tree.setCheckedKeys(this.choosedValue);
    },
    // 递归找到符合的元素
    findItemByName(items, targetName) {
      for (let i = 0; i < items.length; i++) {
        const currentItem = items[i];
        if (currentItem.name === targetName) {
          return currentItem;
        }

        if (currentItem.children) {
          const foundItem = this.findItemByName(
            currentItem.children,
            targetName
          );
          if (foundItem) {
            return foundItem;
          }
        }
      }
    },
    // 清空所有标签
    clearHandle() {
      this.valueName = [];
      this.mychecked=false
      this.allchecked=false;
      this.choosedValue=[]
      this.clearSelected();
    },
    clearSelected() {
      this.$refs.tree.setCheckedKeys([]);
    },
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

css中 多选框元素太多的话 设置最大高度 超出最大高度后 上下滚动

.departAll{
  ::v-deep .el-select__tags{
    max-height:90px;
    overflow-y: auto;
  }
}
1
2
3
4
5
6