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)
        }
    },
    
  • 相关阅读:
    Asp.Net AjaxCalendar控件使用
    My97 使用的一点技巧
    DOM结构展现工具—iedevtoolbar
    揭开正则表达式的神秘面纱
    在客户端遍历控件
    C#3.0学习(2)对象集合初始化器
    GridView中实现CheckBox的全选
    C#3.0学习(1)隐含类型局部变量和扩展方法
    利用HttpModule实现防sql注入
    SQL 计算一個字符串在另一个字符串中出現的次数
  • 原文地址:https://www.cnblogs.com/shemingxin/p/14485623.html
Copyright © 2011-2022 走看看