Element UI el-tree樹形菜單子級取消選中后父級選中效果不變

網上搜了很多案例，但沒有符合要求的，根據其中一個案例改編如下：

原文鏈接

主要實現效果圖：

 

 主要邏輯如下：父級點擊選中或取消時，子級全部選中或取消。子級選中后 所有的父級是選中效果，子級取消選中后，父級仍是選中效果。

主要代碼示例如下：

 <el-tree
        ref="treeFrom"
            :data="treeData"
            show-checkbox
            node-key="id"
            check-on-click-node
            :default-expand-all="true"
            :check-strictly="true"
            :expand-on-click-node="false"
            @node-click="nodeClick">
        </el-tree>

數據格式如下：

treeData: [{
                id: 1,
                label: '一級 1',
                children: [{
                    id: 4,
                    label: '二級 1-1',
                    children: [{
                        id: 9,
                        label: '三級 1-1-1',
                        children: [{
                            id: 11,
                            label: '四級 1-1-1',
                        }]
                    }, {
                        id: 10,
                        label: '三級 1-1-2'
                    }, {
                        id: 12,
                        label: '三級 1-1-3'
                    },
                    ]
                }]
            }, {
                id: 2,
                label: '一級 2',
                children: [{
                    id: 5,
                    label: '二級 2-1'
                }, {
                    id: 6,
                    label: '二級 2-2'
                }]
            }, {
                id: 3,
                label: '一級 3',
                children: [{
                        id: 7,
                        label: '二級 3-1'
                    }, {
                        id: 8,
                        label: '二級 3-2'
                }]
            }],

主要方法如下：

methods:{
        nodeClick(data, node){ 
            this.childNodesChange(node);
            this.parentNodesChange(node);
            //獲取所有選中節點
            console.log(this.$refs.treeFrom.getCheckedNodes())
        },
        // 子級操作遞歸
        childNodesChange(node){
            let len = node.childNodes.length;
            if(len > 0){
                for(let i = 0; i < len; i++){
                    if(!node.checked){
                        node.childNodes[i].checked = false;
                    }else{
                        node.childNodes[i].checked = true;
                    }
                    this.childNodesChange(node.childNodes[i]);
                }   
            }
        },
        // 父級遞歸
        parentNodesChange(node){
            if(node.parent){
                for(let key in node){
                    if(key == "parent"){
                        node[key].checked = true;
                        this.parentNodesChange(node[key]);
                    }
                }
            } 
        },
    }

修改組件自定義樣式（不寫此樣式，選中效果無效）

<style>
    .el-tree-node__label{
        position: relative;
    }
    .el-tree-node__label:before{
        content:'';
        width:20px;
        height: 20px;
        display: block;
        position:absolute;
        top:0px;
        left:-24px;
        z-index:999;
    }
    .el-checkbox__inner{
        top:0;
    }
</style>