• 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)
        }
    },
    
  • 相关阅读:
    《别闹了,费曼先生》听书笔记
    提升失败回报率的清单
    《真实的幸福》听书笔记
    JAVA好书之《深入理解Java虚拟机》
    2017第32周五
    2017第32周四
    《具身认知》听书笔记
    javascript的rsa加密和python的rsa解密
    python socket timeout设置
    想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果
  • 原文地址:https://www.cnblogs.com/shemingxin/p/14485623.html
Copyright © 2020-2023  润新知