el-tree树形结构实现自定义关联
由于el-tree树形结构中父子关联属性不满足需求,需要自定义一个关联性的功能
el-tree中 check-strictly 属性能让父子节点关联,达到下面几种效果:
选中父节点,其所有子节点选中
只要选中一个以上子节点,所有父节点都选中
取消所有子节点,父节点也取消
我们需求的效果是:
选中父节点,其所有子节点选中
只要选中一个以上子节点,父节点都选中
取消所有子节点,父节不取消(需要修改的地方)
<el-tree
:data="treeDataUpdate"
:props="defaultProps"
show-checkbox
@check="getCurrentNode"
:check-strictly="true"
ref="tree"
node-key="permissionsId">
</el-tree>
// 点击check框触发的事件
getCurrentNode(currentObj, treeStatus) {
let selected = treeStatus.checkedKeys.indexOf(currentObj.permissionsId) // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent(currentObj)
// 让子节点全部未选中
this.uniteChildSame(currentObj, true)
} else {
// 未选中 让子节点全部未选中
if (currentObj.childPermissionList.length !== 0) {
this.uniteChildSame(currentObj, false)
}
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame (currentObj, isSelected) {
if(currentObj.childPermissionList == null || currentObj.childPermissionList.length == 0){
return;
}
for(var item of currentObj.childPermissionList){
this.$refs.tree.setChecked(item.permissionsId, isSelected)
this.uniteChildSame(item,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)
}
},