最近碰到个需求，两棵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,
}
]
}
]
}
]
新增
<div>
<!-- 默认分配权限 -->
<h4>默认权限树</h4>
<el-tree
ref="defaultTreeRef"
:data="defaultTreeData"
show-checkbox
node-key="id"
:highlight-current="true"
:props="defaultProps"
s
@check="clickDeafaultLeave"
/>
</div>
<div>
<h4>可分配权限树</h4>
<el-tree
ref="distributableTreeRef"
:data="distributableTreeData"
show-checkbox
node-key="id"
:highlight-current="true"
:props="defaultProps"
/>
</div>
data() {
return {
defaultTreeData: [],
distributableTreeData: [],
addDisabledTree: [],
defaultProps: {
children: "menuChildren",
label: "privilegeName",
},
curentModifyList: [],
};
},
methods: {
search() {
axios.get("http://localhost:3000/data").then((res) => {
this.defaultTreeData = deepClone(res.data);
this.distributableTreeData = deepClone(res.data);
this.addDisabledAttr(this.distributableTreeData);
});
},
// 给可分配添加disbaled属性
addDisabledAttr(ids) {
ids.forEach((item) => {
this.$set(item, "disabled", false);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
this.$set(val, "disabled", false);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
this.$set(v, "disabled", false);
});
}
});
}
});
this.addDisabledTree = ids;
},
// 获取当前点击的全部ID
getCurrentClickDeafultTreeID(data) {
console.log("data===>", data);
let ids = [];
if (data !== undefined) {
ids.push(data.id);
data.menuChildren.forEach((item) => {
ids.push(item.id);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
ids.push(val.id);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
ids.push(v.id);
});
}
});
}
});
}
return ids;
},
clickDeafaultLeave(data) {
let defaultKeys = [
...this.getClickDeafultTreeIDList(data),
...this.getCurrentClickDeafultTreeID(data),
];
// 渲染可分配树
this.renderDistrubList(defaultKeys, data);
// 取消勾选，去除disabled属性
this.modifyCheckedStatus(data);
},
// 点击默认树获取点击的分类D数组
getClickDeafultTreeIDList(data) {
let ids = [];
// 爷爷叶子
if (data.privilegeType === 0) {
ids.push(data.id);
}
// 爸爸叶子
else if (data.privilegeType === 1) {
this.defaultTreeData.forEach((item) => {
if (data.privilegePid === item.id) {
ids.push(item.id);
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === data.privilegePid) {
ids.push(id);
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === data.privilegePid) {
ids.push(item.id);
}
});
}
});
}
});
}
// 儿子叶子
else if (data.privilegeType === 2) {
ids.push(data.id);
}
return ids;
},
// // 渲染可分配树的
// // ids 就是当前点击的默认树节点ID
renderDistrubList(ids, data) {
ids.push(data.privilegePid);
// 获取父级和顶级ID
let allKeys = [...this.getTopId(data), ...ids];
let keys = [
...this.$refs.distributableTreeRef.getCheckedKeys(),
...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
];
// 去除可分配树的勾选
for (let i = 0; i < allKeys.length; i++) {
const count = allKeys[i];
if (keys.length > 0) {
setTimeout(() => {
let ids = [];
keys.forEach((item) => {
if (item === count) {
ids.push(item);
}
});
ids.forEach((item) => {
this.$refs.distributableTreeRef.setChecked(item, false, false);
});
}, 200);
}
this.addDisabledTree.forEach((item) => {
if (item.id === count) {
item.disabled = true;
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === count) {
val.disabled = true;
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === count) {
v.disabled = true;
}
});
}
});
}
});
}
},
// 获取到最顶级的ID
getTopId(data) {
let fatherId = [];
this.defaultTreeData.forEach((item) => {
if (data.privilegePid === item.id) {
fatherId.push(item.id);
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === data.privilegePid) {
fatherId.push(item.id);
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === data.privilegePid) {
fatherId.push(item.id);
}
});
}
});
}
});
return fatherId;
},
// // 取消选中的状态
modifyCheckedStatus(data) {
console.log(777777, data);
let defaultKeys = [
...this.$refs.defaultTreeRef.getCheckedKeys(),
...this.$refs.defaultTreeRef.getHalfCheckedKeys(),
];
if (
!this.isIncludesAllChecked(
this.getCurrentClickDeafultTreeID(data),
defaultKeys
)
) {
//
if (data.privilegeType === 0) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
console.log("010001---<", this.curentModifyList);
}
// 爸爸叶子
else if (data.privilegeType === 1) {
// 根据当前选中的节点父亲判断是否还包含在已勾选状态的关联
if (defaultKeys.includes(data.privilegePid)) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
console.log("111111---<", this.curentModifyList);
} else {
this.curentModifyList = [
...this.getTopId(data),
...this.getCurrentClickDeafultTreeID(data),
];
}
} else if (data.privilegeType === 2) {
// 判断当前点击的元素父亲是否在勾选的范围内
if (defaultKeys.includes(data.privilegePid)) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
console.log("22222222---<", this.curentModifyList);
} else if (!defaultKeys.includes(data.privilegePid)) {
//如果当前点击的元素的父亲在勾选的范围内
if (defaultKeys.includes(this.getTopId(data)[0])) {
// 如果他的爷爷在勾选的范围呢
let ids = [];
ids.push(data.id);
ids.push(data.privilegePid);
this.curentModifyList = ids;
} else {
let ids = [];
ids.push(data.id);
ids.push(data.privilegePid);
ids.push(this.getTopId(data)[0]);
this.curentModifyList = ids;
}
}
}
for (let i = 0; i < this.curentModifyList.length; i++) {
const count = this.curentModifyList[i];
this.addDisabledTree.forEach((item) => {
if (item.id === count) {
item.disabled = false;
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === count) {
val.disabled = false;
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === count) {
v.disabled = false;
}
});
}
});
}
});
}
}
},
// 判断默认树当前取消勾选与原勾选
// checkedList当前已经勾选的
// allList全部已勾选的
isIncludesAllChecked(checkedList, allList) {
let flag = false;
for (let i = 0; i < checkedList.length; i++) {
const conut = checkedList[i];
if (allList.includes(conut)) {
flag = true;
} else {
flag = false;
}
}
return flag;
},
编辑
主要是添加了回显方法
echoDisbledStatus
data() {
return {
defaultTreeData: [],
distributableTreeData: [],
addDisabledTree: [],
defaultProps: {
children: "menuChildren",
label: "privilegeName",
},
curentModifyList: [],
filters: {
deafult: "1,2,9,26,63,61,62,64,8,60,55,56,57,58,59,7,3",
opt: "27,28,82,79,80,83,81,29,87,88,85,84,33,35,89,92,91,34,93,94,90,95,36,38,98,78,99,100",
},
};
},
methods: {
search() {
axios.get("http://localhost:3000/data").then((res) => {
this.defaultTreeData = deepClone(res.data);
this.distributableTreeData = deepClone(res.data);
this.addDisabledAttr(this.distributableTreeData);
// this.$refs.distributableTreeRef.setChecked(item, true, false);
setTimeout(() => {
this.filters.deafult
.split(",")
.map(Number)
.forEach((item) => {
this.$refs.defaultTreeRef.setChecked(item, true, false);
});
}, 200);
setTimeout(() => {
this.filters.opt
.split(",")
.map(Number)
.forEach((item) => {
this.$refs.distributableTreeRef.setChecked(item, true, false);
});
}, 200);
this.echoDisbledStatus();
});
},
// 给可分配添加disbaled属性
addDisabledAttr(ids) {
ids.forEach((item) => {
this.$set(item, "disabled", false);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
this.$set(val, "disabled", false);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
this.$set(v, "disabled", false);
});
}
});
}
});
this.addDisabledTree = ids;
},
clickDeafaultLeave(data) {
let defaultKeys = [
...this.getClickDeafultTreeIDList(data),
...this.getCurrentClickDeafultTreeID(data),
];
// 渲染可分配树
this.renderDistrubList(defaultKeys, data);
// 取消勾选，去除disabled属性
this.modifyCheckedStatus( data);
},
// 点击默认树获取点击的分类D数组
getClickDeafultTreeIDList(data) {
let ids = [];
// 爷爷叶子
if (data.privilegeType === 0) {
ids.push(data.id);
}
// 爸爸叶子
else if (data.privilegeType === 1) {
this.defaultTreeData.forEach((item) => {
if (data.privilegePid === item.id) {
ids.push(item.id);
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === data.privilegePid) {
ids.push(id);
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === data.privilegePid) {
ids.push(item.id);
}
});
}
});
}
});
}
// 儿子叶子
else if (data.privilegeType === 2) {
ids.push(data.id);
}
return ids;
},
// 获取当前点击的全部ID
getCurrentClickDeafultTreeID(data) {
// console.log(data);
let ids = [];
ids.push(data.id);
// console.log(data.menuChildren);
if (data.menuChildren) {
data.menuChildren.forEach((item) => {
ids.push(item.id);
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
ids.push(val.id);
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
ids.push(v.id);
});
}
});
}
});
}
return ids;
},
// 渲染可分配树的
// ids 就是当前点击的默认树节点ID
renderDistrubList(ids, data) {
ids.push(data.privilegePid);
// 获取父级和顶级ID
let allKeys = [...this.getTopId(data), ...ids];
let keys = [
...this.$refs.distributableTreeRef.getCheckedKeys(),
...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
];
// 去除可分配树的勾选
for (let i = 0; i < allKeys.length; i++) {
const count = allKeys[i];
if (keys.length > 0) {
setTimeout(() => {
let ids = [];
keys.forEach((item) => {
if (item === count) {
ids.push(item);
}
});
ids.forEach((item) => {
this.$refs.distributableTreeRef.setChecked(item, false, false);
});
}, 200);
}
this.addDisabledTree.forEach((item) => {
if (item.id === count) {
item.disabled = true;
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === count) {
val.disabled = true;
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === count) {
v.disabled = true;
}
});
}
});
}
});
}
},
// 获取到最顶级的ID
getTopId(data) {
let fatherId = [];
this.defaultTreeData.forEach((item) => {
if (data.privilegePid === item.id) {
fatherId.push(item.id);
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === data.privilegePid) {
fatherId.push(item.id);
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === data.privilegePid) {
fatherId.push(item.id);
}
});
}
});
}
});
return fatherId;
},
// 取消选中的状态
modifyCheckedStatus(data) {
let defaultKeys = [
...this.$refs.defaultTreeRef.getCheckedKeys(),
...this.$refs.defaultTreeRef.getHalfCheckedKeys(),
];
if (
!this.isIncludesAllChecked(
this.getCurrentClickDeafultTreeID(data),
defaultKeys
)
) {
if (data.privilegeType === 0) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
}
// 爸爸叶子
else if (data.privilegeType === 1) {
// 根据当前选中的节点父亲判断是否还包含在已勾选状态的关联
if (defaultKeys.includes(data.privilegePid)) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
} else {
this.curentModifyList = [
...this.getTopId(data),
...this.getCurrentClickDeafultTreeID(data),
];
}
} else if (data.privilegeType === 2) {
// 判断当前点击的元素父亲是否在勾选的范围内
if (defaultKeys.includes(data.privilegePid)) {
this.curentModifyList = this.getCurrentClickDeafultTreeID(data);
} else if (!defaultKeys.includes(data.privilegePid)) {
//如果当前点击的元素的父亲在勾选的范围内
// console.log("this.getTopId(data)[0]===>", this.getTopId(data)[0]);
if (defaultKeys.includes(this.getTopId(data)[0])) {
// 如果他的爷爷在勾选的范围呢
let ids = [];
ids.push(data.id);
ids.push(data.privilegePid);
this.curentModifyList = ids;
} else {
let ids = [];
ids.push(data.id);
ids.push(data.privilegePid);
ids.push(this.getTopId(data)[0]);
this.curentModifyList = ids;
}
}
}
for (let i = 0; i < this.curentModifyList.length; i++) {
const count = this.curentModifyList[i];
this.addDisabledTree.forEach((item) => {
if (item.id === count) {
item.disabled = false;
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === count) {
val.disabled = false;
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === count) {
v.disabled = false;
}
});
}
});
}
});
}
}
},
// 判断默认树当前取消勾选与原勾选
// checkedList当前已经勾选的
// allList全部已勾选的
isIncludesAllChecked(checkedList, allList) {
let flag = false;
for (let i = 0; i < checkedList.length; i++) {
const conut = checkedList[i];
if (allList.includes(conut)) {
flag = true;
} else {
flag = false;
}
}
return flag;
},
echoDisbledStatus() {
let keys = [
...this.$refs.distributableTreeRef.getCheckedKeys(),
...this.$refs.distributableTreeRef.getHalfCheckedKeys(),
];
let allKeys = this.filters.deafult.split(",").map(Number);
for (let i = 0; i < allKeys.length; i++) {
const count = allKeys[i];
setTimeout(() => {
let ids = [];
keys.forEach((item) => {
if (item === count) {
ids.push(item);
}
});
ids.forEach((item) => {
this.$refs.distributableTreeRef.setChecked(item, false, false);
});
}, 200);
this.addDisabledTree.forEach((item) => {
if (item.id === count) {
item.disabled = true;
}
if (item.menuChildren.length > 0) {
item.menuChildren.forEach((val) => {
if (val.id === count) {
val.disabled = true;
}
if (val.menuChildren.length > 0) {
val.menuChildren.forEach((v) => {
if (v.id === count) {
v.disabled = true;
}
});
}
});
}
});
}
},
},