zoukankan      html  css  js  c++  java
  • 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)
        }
    },
    
  • 相关阅读:
    fortran imsl 程序库
    使用NET USE将USB端口模拟为LPT1
    Processing鼠标响应(1)
    MATLAB矩阵运算(1)
    Processing中类的定义
    Perl的第二纪
    Processing鼠标响应(2)
    Processing中的图片互动
    gFortran的使用
    用回溯法来产生由0或1组成的2m个二进位串,使该串满足以下要求
  • 原文地址:https://www.cnblogs.com/shemingxin/p/14485623.html
Copyright © 2011-2022 走看看