效果預覽
解決方案
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
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
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
說明
選中權限對應form.checkedPerms數組中的權限id。
permList存儲所有權限，初始化需要加載。
選中權限(form.checkedPerms[])如果包含在所有權限(permList[])中，呈選中狀態。
原文鏈接：https://blog.csdn.net/fengsheng5210/java/article/details/87718868