实现点击父级全选子级,取消某个子级后,父级不会取消。
<template>
<el-tree
:data="Data"
show-checkbox
:default-checked-keys="ids"
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
:check-strictly="true"
@check="nodeClick"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
Data: [],
ids: [],
};
},
created() {
},
methods: {
// 实现权限向下级联
nodeClick(currentObj, treeStatus) {
// 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中,>=0为选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中(需要选中父节点时候调用此方法)
this.selectedParent(currentObj);
// 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true);
} else {
// 未选中 处理子节点全部未选中
if (currentObj.children && currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false);
}
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame(treeList, isSelected) {
this.$refs.tree.setChecked(treeList.id, isSelected);
if (treeList.children) {
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected);
}
}
},
// 统一处理父节点为选中
selectedParent(currentObj) {
let currentNode = this.$refs.tree.getNode(currentObj);
if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true);
this.selectedParent(currentNode.parent);
}
},
},
};
</script>