ElementUI三级菜单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>
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
123
124
data: {
form: {
checkedPerms: [], //选中权限
},
permList:[], //权限列表
},
1
2
3
权限对象涉及成员
// 前台的permList[]获取到的数据是下述对象集合的JSON
public class Permission {
private Integer id; //当前权限ID
private Integer pId;
private String name;
private List<GlobalPermission> childPerm; // 权限子节点集合
}
1
2
3
4
5
说明
选中权限对应form.checkedPerms数组中的权限id。
permList存储所有权限，初始化需要加载。
选中权限(form.checkedPerms[])如果包含在所有权限(permList[])中，呈选中状态。
感谢！