el-tree禁用
最近碰到个需求，两棵el-tree，
- 点击勾选第一棵树， 第二棵树对应的节点自动禁用状态。
- 点击勾选第二棵树， 然后再点击勾选第一棵树，第二棵树对应的勾选状态取消
代码展示
数据结构
"data":[
{
"id":2,
"privilegePid":0,
"privilegeName":"用户中心",
"privilegeType":0,
"menuChildren":[
{
"id":11,
"privilegePid":2,
"privilegeName":"用户组管理",
"privilegeType":1,
"menuChildren":[
{
"id":50,
"privilegePid":11,
"privilegeName":"用户组-按钮-搜索",
"privilegeType":2,
}
]
}
]
}
]
<el-tree ref="treeRef" :data="menuTreeData" :highlight-current="true" :props="defaultProps" node-key="id" show-checkbox @check="handleMenuTree" />
<el-tree ref="distributableTreeRef" :data="distributableTreeData" :highlight-current="true" :props="defaultProps" node-key="id" show-checkbox @check="handleDistributableTree" />
新增
//给可分配权限节点全部置灰
//ids：可分配权限树 list：菜单权限树
setDistributableTreeDisabledStatus(ids, list) {
if (ids) {
ids.forEach((item) => {
this.distributableTreeDataList.push(item);
this.$set(item, "disabled", true);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
this.distributableTreeDataList.push(val);
this.$set(val, "disabled", true);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
this.distributableTreeDataList.push(v);
this.$set(v, "disabled", true);
});
}
});
}
});
}
if (list) {
list.forEach((item) => {
this.menuTreeDataList.push(item);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
this.menuTreeDataList.push(val);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
this.menuTreeDataList.push(v);
});
}
});
}
});
}
},
/* -----------------菜单权限操作------------------------*/
//获取
handleMenuTree(data, node) {
let checkedNodeList = [...node.checkedKeys, ...node.halfCheckedKeys];
// console.log('checkedNodeList==>', checkedNodeList)
//如果取消节点
if (this.isTreeMenuChecked(data)) {
console.log("取消节点~~~~~~~~~~");
if (data.privilegeType === 0) {
this.cancelDistributableTreeCheckedStatus(this.getAllOptIdList(data));
} else if (data.privilegeType === 1) {
//如果点击的父ID 和爷爷ID 不在 所有的节点中，则表示全部都取消了
if (
!checkedNodeList.includes(data.privilegePid) &&
!checkedNodeList.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲和爷爷都不存在！！");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [
...this.getAllOptIdList(data),
...tempIds,
...[this.findGrandFatherId(data.privilegePid)],
];
this.cancelDistributableTreeCheckedStatus(ids);
}
if (
!checkedNodeList.includes(data.privilegePid) &&
checkedNodeList.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲不存在，但是爷爷存在~~~~");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [...this.getAllOptIdList(data), ...tempIds];
this.cancelDistributableTreeCheckedStatus(ids);
}
if (
checkedNodeList.includes(data.privilegePid) &&
checkedNodeList.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲存在 && 爷爷也存在~~~~~");
this.cancelDistributableTreeCheckedStatus(
this.getAllOptIdList(data)
);
}
} else if (data.privilegeType === 2) {
//如果点击的父ID 和 爷爷ID 都不在 所有的节点中，则表示全部都取消了
if (
!checkedNodeList.includes(data.privilegePid) &&
!checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲和爷爷都不存在！！");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [
...this.getAllOptIdList(data),
...tempIds,
...[this.findGrandFatherId(data.privilegePid)],
];
this.cancelDistributableTreeCheckedStatus(ids);
}
if (
!checkedNodeList.includes(data.privilegePid) &&
checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲不存在，但是爷爷存在~~~~");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [...this.getAllOptIdList(data), ...tempIds];
this.cancelDistributableTreeCheckedStatus(ids);
}
if (
checkedNodeList.includes(data.privilegePid) &&
checkedNodeList.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲存在 && 爷爷也存在~~~~~");
this.cancelDistributableTreeCheckedStatus(
this.getAllOptIdList(data)
);
}
}
} else {
let defaultKeys = [
...this.$refs.distributableTreeRef.getCheckedKeys(),
...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
];
//选中节点 data.privilegeType.对可分配树的勾选数据进行去重
if (data.privilegeType === 0) {
this.renderDistributableTreeCheckedStatus(this.getAllOptIdList(data));
} else if (data.privilegeType === 1) {
const ids = [...checkedNodeList, this.getAllOptIdList(data)];
this.renderDistributableTreeCheckedStatus(chooseNonRepeatingData(ids,defaultKeys));
} else if (data.privilegeType === 2) {
const ids = [...checkedNodeList, this.getAllOptIdList(data)];
this.renderDistributableTreeCheckedStatus(chooseNonRepeatingData(ids,defaultKeys));
}
}
},
//当权限树被点击的时候，渲染可分配树为勾选状态
renderDistributableTreeCheckedStatus(selectedMenuTreeIdList) {
this.distributableTreeDataList.forEach((item) => {
selectedMenuTreeIdList.forEach((val) => {
if (val === item.id) {
item.disabled = false;
this.$refs.distributableTreeRef.setChecked(item, false, false);
}
});
});
},
//取消勾选权限树，给可分配置灰
cancelDistributableTreeCheckedStatus(cancelSelectTreeIdList) {
this.distributableTreeDataList.forEach((item) => {
cancelSelectTreeIdList.forEach((val) => {
if (val === item.id) {
item.disabled = true;
this.$refs.distributableTreeRef.setChecked(item, false, false);
}
});
});
},
/* -----------------可选分配权限操作--------------------*/
handleDistributableTree(data, node) {
console.log("data==>", data);
console.log("node==>", node);
let defaultKeys = [...node.checkedKeys, ...node.halfCheckedKeys];
if (this.isDistributableTreeChecked(data)) {
if (data.privilegeType === 0) {
this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
} else if (data.privilegeType === 1) {
//如果点击的父ID 和爷爷ID 不在 所有的节点中，则表示全部都取消了
if (
!defaultKeys.includes(data.privilegePid) &&
!defaultKeys.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲和爷爷都不存在！！");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [
...this.getAllOptIdList(data),
...tempIds,
...[this.findGrandFatherId(data.privilegePid)],
];
this.cancelCheckedAddDisabledStatus(ids);
}
if (
!defaultKeys.includes(data.privilegePid) &&
defaultKeys.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲不存在，但是爷爷存在~~~~");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [...this.getAllOptIdList(data), ...tempIds];
this.cancelCheckedAddDisabledStatus(ids);
}
if (
defaultKeys.includes(data.privilegePid) &&
defaultKeys.includes(data.privilegePid)
) {
console.log("privilegeType===1-----父亲存在 && 爷爷也存在~~~~~");
}
this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
} else if (data.privilegeType === 2) {
//如果点击的父ID 和 爷爷ID 都不在 所有的节点中，则表示全部都取消了
if (
!defaultKeys.includes(data.privilegePid) &&
!defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲和爷爷都不存在！！");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [
...this.getAllOptIdList(data),
...tempIds,
...[this.findGrandFatherId(data.privilegePid)],
];
this.cancelCheckedAddDisabledStatus(ids);
}
if (
!defaultKeys.includes(data.privilegePid) &&
defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲不存在，但是爷爷存在~~~~");
const tempIds = [];
tempIds.push(data.privilegePid);
let ids = [...this.getAllOptIdList(data), ...tempIds];
this.cancelCheckedAddDisabledStatus(ids);
}
if (
defaultKeys.includes(data.privilegePid) &&
defaultKeys.includes(this.findGrandFatherId(data.privilegePid))
) {
console.log("privilegeType===2-----父亲存在 && 爷爷也存在~~~~~");
this.cancelCheckedAddDisabledStatus(this.getAllOptIdList(data));
}
}
}
},
//取消菜单和可分配的勾选状态，并且给可分配加上Disabled状态
cancelCheckedAddDisabledStatus(cancelSelectTreeIdList) {
// this.distributableTreeDataList.forEach((item) => {
// cancelSelectTreeIdList.forEach((val) => {
// if (val === item.id) {
// item.disabled = true
// }
// })
// })
// this.menuTreeDataList.forEach((item) => {
// cancelSelectTreeIdList.forEach((val) => {
// if (val === item.id) {
// this.$refs.treeRef.setChecked(item, false, false)
// }
// })
// })
},
/*---------------------------------------管理员时候对权限树的操作----------------------------------------------------------------*/
async getOrdinaryManPermissionList() {
const { userGroupIds } = JSON.parse(getUserToken());
await this.$store
.dispatch(
"groupPermissions/getOrdinaryAdminPermissionsList",
userGroupIds
)
.then(() => {
this.distributableTreeData = deepClone(
this.adminPermissionsList
).sort((a, b) => {
return a.id - b.id;
});
});
},
/*---------------------------------------公用方法-----------------------------------------------------------------------------*/
//获取操作树节点所有的id
getAllOptIdList(data) {
const ids = [];
ids.push(data.id);
if (data.menuChildren.length > 0) {
data.menuChildren.forEach((val) => {
ids.push(val.id);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
ids.push(v.id);
});
}
});
}
return ids;
},
//判断菜单权限节点是否被选中
isTreeMenuChecked(data) {
let defaultKeys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys(),
];
//当前选中的节点如果不包含在全部选中节点里面，就是取消了选择
return !defaultKeys.includes(data.id);
},
//判断可分配权限是否被选中
isDistributableTreeChecked(data) {
let defaultKeys = [
...this.$refs.distributableTreeRef.getCheckedKeys(),
...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
];
//当前选中的节点如果不包含在全部选中节点里面，就是取消了选择
return !defaultKeys.includes(data.id);
},
//找爷爷节点
findGrandFatherId(fatherId) {
let grandFatherId = null;
this.distributableTreeData.forEach((item) => {
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === fatherId) {
grandFatherId = val.privilegePid;
}
});
}
});
return grandFatherId;
},
编辑
// 获取superMan权限组数据
async getSuperManPermissionList(menuKeys, distributableOptionsTreeKeys) {
const params = new FormData();
params.append("groupType", this.filters.groupType);
await this.$store
.dispatch("groupPermissions/getSuperAdminPermissionsList",params)
.then(() => {
this.distributableTreeData = deepClone(
this.adminPermissionsList
).sort((a, b) => {
return a.id - b.id;
});
this.menuTreeData = deepClone(this.adminPermissionsList).sort(
(a, b) => {
return a.id - b.id;
}
);
//回显菜单权限
this.$nextTick(() => {
menuKeys.forEach((item) => {
let node = this.$refs.treeRef.getNode(item);
if (node) {
if (node.isLeaf) {
this.$refs.treeRef.setChecked(node, true);
}
}
});
});
//回显可分配权限
this.$nextTick(() => {
distributableOptionsTreeKeys.forEach((item) => {
let node = this.$refs.distributableTreeRef.getNode(item);
if (node.isLeaf) {
this.$refs.distributableTreeRef.setChecked(node, true);
}
});
});
this.setDistributableTreeDisabledStatus(
this.distributableTreeData,
this.menuTreeData,
menuKeys
);
});
},
本文来自博客园，作者：云霄紫潭，转载请注明原文链接：https://www.cnblogs.com/0520euv/p/15303792.html
