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)
    }
},
posted @ 2021-03-05 13:21  shetoutou  阅读(943)  评论(0编辑  收藏  举报