ElementUI三级菜单checkBox全选实现_vue三级全选checkbox

效果预览

解决方案

UI代码

// 这段代码主要是遍历权限
<el-form-item label="角色权限" prop="checkedPerms">
            <el-checkbox-group v-model="form.checkedPerms">
                <dl class="permission-list" v-for="(firstPerm,index) in permList">
                  <dt>
                    <el-checkbox :label="firstPerm.id" @change="firstPermChanged(index)">{{firstPerm.name}}</el-checkbox>
                  </dt>
                  <dd>
                    <dl class="cl permission-list2" v-for="(secondPerm,index2) in firstPerm.childPerm">
                        <dt>
                            <el-checkbox :label="secondPerm.id" @change="secondPermChanged(index,index2)">{{secondPerm.name}}</el-checkbox>
                        </dt>
                        <dd style="padding-left:30px;">
                            <el-checkbox :label="thirdPerm.id" v-for="(thirdPerm,index3) in secondPerm.childPerm" @change="thirdPermChanged(index,index2,index3)">{{thirdPerm.name}}</el-checkbox>
                        </dd>
                    </dl>
                  </dd>
                </dl>
            </el-checkbox-group>
        </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Vue代码

       // 判断数组中是否包含Id
        find:function(id){
            var isCheckAll = false;
            for(var i=0;i<this.form.checkedPerms.length;i++){
                if (this.form.checkedPerms[i]==id){
                    isCheckAll=true;
                }
            }
            return isCheckAll;
        },
        // 删除数组中的元素
        removeByValue:function(arr, val){
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == val) {
                    arr.splice(i, 1);
                    break;
                }
            }
        },
        // 点击一级权限
        firstPermChanged:function(index){
            var firstPerm = this.permList[index];
            var isCheck = this.find(firstPerm.id);  // 一级权限是否选中
            if(isCheck){
                for(var j=0;j<firstPerm.childPerm.length;j++){
                    // 添加所有的二级权限
                    this.form.checkedPerms.push(firstPerm.childPerm[j].id);
                    for(var k=0;k<firstPerm.childPerm[j].childPerm.length;k++){
                        // 添加所有的三级权限
                        this.form.checkedPerms.push(firstPerm.childPerm[j].childPerm[k].id);
                    }
                }
            } else{
                for(var j=0;j<firstPerm.childPerm.length;j++){
                    // 删除所有二级权限
                    this.removeByValue(this.form.checkedPerms,firstPerm.childPerm[j].id);
                    for(var k=0;k<firstPerm.childPerm[j].childPerm.length;k++){
                        // 删除所有三级权限
                        this.removeByValue(this.form.checkedPerms,firstPerm.childPerm[j].childPerm[k].id);
                    }
                }
            }
            console.log("一级选中后长度----"+this.form.checkedPerms.length);
        },
        // 点击二级权限
        secondPermChanged:function(index,index2){
            var firstPerm = this.permList[index];
            var secondPerm = this.permList[index].childPerm[index2];
            var isSecondCheck = this.find(secondPerm.id);   // 二级权限是否选中
            if(isSecondCheck){
                // 添加一级权限
                if(!this.find(firstPerm.id)){
                    this.form.checkedPerms.push(firstPerm.id);
                }
                for(var j=0;j<secondPerm.childPerm.length;j++){
                    // 添加二级权限的三级权限
                    this.form.checkedPerms.push(secondPerm.childPerm[j].id);
                }
            } else{
                // 删除二级权限的三级权限
                for(var j=0;j<secondPerm.childPerm.length;j++){
                    this.removeByValue(this.form.checkedPerms,secondPerm.childPerm[j].id);
                }
                // 判断二级权限是否有兄弟选中
                var isSiblingsCheck = false;
                for(var i=0;i<firstPerm.childPerm.length;i++){
                    if(this.find(firstPerm.childPerm[i].id)){
                        isSiblingsCheck = true;
                        break;
                    }
                }
                // 如果没有，就删除一级权限
                if(!isSiblingsCheck){
                    this.removeByValue(this.form.checkedPerms,firstPerm.id);
                }
            }
            console.log("二级选中后长度----"+this.form.checkedPerms.length);
        },
        // 点击三级权限
        thirdPermChanged:function(index,index2,index3){
            var firstPerm = this.permList[index];
            var secondPerm = firstPerm.childPerm[index2];
            var thirdPerm = secondPerm.childPerm[index3];
            var isThirdCheck = this.find(thirdPerm.id);
            // 判断三级权限是否被选中
            if(isThirdCheck){
                // 添加前需要判断是否已存在
                // 添加一级权限
                if(!this.find(firstPerm.id)){
                    this.form.checkedPerms.push(firstPerm.id);
                }
                // 添加二级权限
                if(!this.find(secondPerm.id)){
                    this.form.checkedPerms.push(secondPerm.id);
                }
            } else{
                // 判断三级权限的兄弟是否被选中
                var isSiblingsCheck=false;
                for(var i=0;i<secondPerm.childPerm.length;i++){
                    if(this.find(secondPerm.childPerm[i].id)){
                        isSiblingsCheck = true;
                        break;
                    }
                }
                if(!isSiblingsCheck){
                    // 删除二级权限
                    this.removeByValue(this.form.checkedPerms,secondPerm.id);
                    // 判断二级权限的兄弟是否被选中
                    var isThirdSiblingsCheck = false;
                    for(var i=0;i<firstPerm.childPerm.length;i++){
                        if(this.find(firstPerm.childPerm[i].id)){
                            isThirdSiblingsCheck = true;
                            break;
                        }
                    }
                    // 如果没有，删除一级权限
                    if(!isThirdSiblingsCheck){
                        this.removeByValue(this.form.checkedPerms,firstPerm.id);
                    }
                } 
            }
            console.log("三级选中后长度----"+this.form.checkedPerms.length);
        }

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

 data: {
        form: {
            checkedPerms: [],   //选中权限
          },
        permList:[],            //权限列表 
     
    },
1
2
3
4
5
6
7

权限对象涉及成员

// 前台的permList[]获取到的数据是下述对象集合的JSON
public class Permission {

    private Integer id;   //当前权限ID
    
    private Integer pId;
       
    private String name;
    
    private List<GlobalPermission> childPerm; // 权限子节点集合
    
}
1
2
3
4
5
6
7
8
9
10
11
12

说明

选中权限对应form.checkedPerms数组中的权限id。
permList存储所有权限，初始化需要加载。
选中权限(form.checkedPerms[])如果包含在所有权限(permList[])中，呈选中状态。