element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)

在做菜单和菜单按钮权限配置这块，用element-UI中的tree组件来做。想选中单个页面，或者单个页面的某个具体按钮，就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选。 原生配置项并没有这种玩法，百度搜索也没有具体写法，这里分享一下我的做法。上代码

不讲业务,只讲功能的话 简单点来说就是

1. 勾选父级默认勾选所有子级
2. 勾选子级,默认勾选所有上级,如果子级还有下级,也要默认勾选
3. 取消勾选子级,所有上级之前的勾选不变, 如果取消勾选的子级有下级,下级应随取消勾选的子级变化

如果说上面三种需求有哪个不需要的 在下面的代码直接改也特别的方便

这里是html的代码

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

这里是js代码

<script>
export default {
    data(){
        return{
            pageTitle:this.$route.meta.title,
            arr:[],
            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);
            // this.$refs.Tree.getCheckedNodes() 这个方法是官网自带的 若节点可被选择（即    show-checkbox 为 true），则返回目前被选中的节点所组成的数组
            this.arr= this.$refs.Tree.getCheckedNodes() 
            let list = []
            this.arr.forEach((item) => {
              list.push(item.id)
            })
            console.log(this.SelectMenulist, '这是需要传给后端勾选的数据id');
        },
        childNodesChange(node){
            console.log( node.checked,node.childNodes)
            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]);
                    }
                }
            } 
        },
    }
}
</script>

这是样式代码, 注意 样式必须要加进去, 不然会报错!

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