element ui tree控件父節點和子節點之間的關聯問題

問題描述:當需改的時候若是父節點爲選中狀態子節點不是全選中這樣會顯示爲子節點爲全選中狀態
<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://blog.csdn.net/Beam007/article/details/87858291node

相關文章
相關標籤/搜索