element ui tree控件父节点和子节点之间的关联问题

更新日期: 2019-10-26阅读: 5.2k标签: 控件

问题描述:当需改的时候如果父节点为选中状态子节点不是全选中这样会显示为子节点为全选中状态


代码

<el-tree
        v-model="data.xxx"
        :data="xxx"
        show-checkbox
        node-key="id"
        ref="tree"
        :check-strictly="true"//在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false  
        :default-checked-keys="assignPerCon.permissionArr"
        @check="clickDeal"//父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
        :props="defaultProps">
</el-tree>

clickDeal (currentObj, treeStatus) {
    // 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
    let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中
    // 选中
    if (selected !== -1) {
        // 子节点只要被选中父节点就被选中
        this.selectedParent(currentObj);
        // 统一处理子节点为相同的勾选状态
        this.uniteChildSame(currentObj, true)
    } else {
        // 未选中 处理子节点全部未选中
        if (currentObj.children !== undefined){
            if (currentObj.children.length !== 0) {
                this.uniteChildSame(currentObj, false)
            }
             //放开时为当子节点全为未选中时父节点也变为未选中状态   注释后就是父节点不和子节点强制绑定
            // this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
        }
        // else {
        //     this.uniteParentSame(currentObj.id,treeStatus)
        // }
    }
},
uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
    let node = this.$refs.tree.getNode(id);//获取当前节点的节点树
    if (node.parent !== null && node.parent !== undefined) {
        let parentNode =   node.parent.data;//获取当前节点的父节点树
        if (parentNode != undefined){//判断父节点是否存在
            for (let i = 0; i < parentNode.children.length; i++) {
                let checkedKeys = this.$refs.tree.getCheckedKeys();
                let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
                let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
                let selected = selectNodes.indexOf(parentNode.children[i].id); // -1当前节点的同级节点是否全部未选中
                if (selected !== -1){
                    return;
                }
            }
        }else {
            return;
        }
        this.$refs.tree.setChecked(parentNode.id, false);//修改节点为未选择
        if(node.level>2){//判断是否是最上级节点
            this.uniteParentSame(parentNode.id,treeStatus)
        }
    }else {
        return;
    }
},
// 统一处理子节点为相同的勾选状态
uniteChildSame (treeList, isSelected) {
    this.$refs.tree.setChecked(treeList.id, isSelected);
    if (treeList.children !== undefined){
        for (let i = 0; i < treeList.children.length; i++) {
            this.uniteChildSame(treeList.children[i], 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)
    }
},


链接: https://fly63.com/article/detial/6629

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!