父子节点不要联动，原因∶

1、比如我只需要配置菜单，联动的话会导致下面的按钮一起勾上;
2、回显数据时，如果后端只返回了一个父节点id，但是前端会把它下面的子节点也全都勾上;

但是不联动的话，只能一个个的勾选，如果权限数量过多就很麻烦，所以我就像在右边另外加个按钮

在这里插入图片描述

代码：

就一个html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app"></div>
</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>


  <script>
   
var vm = new Vue({
    el: '#app',
    template: `<el-tree
    :data="data2"
    show-checkbox
    node-key="id"
    ref="tree"
    default-expand-all
    :props="defaultProps"
    v-model="defaultCheckedMenuId"
    :default-checked-keys="defaultCheckedMenuId"
    check-strictly
   
>
<span class="custom-tree-node" slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <span :hidden="!data.children">
      <el-button
        type="text"
        size="mini"
        @click.stop="() => append(node, data)">
        全选子节点
      </el-button>
  </span>
</el-tree>`,
    data: {
        data2: [{
            id: 1,
            label: '111111111111一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                    id: 91,
                    label: '三级 1-1-1'
                }, {
                    id: 10,
                    label: '三级 1-1-2',
                    children: [{
                        id: 9,
                        label: '四级 1-1-2-1'
                    }]
                }]
            }]
        }, {
            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'
                }]
            }],

        defaultProps: {
            id: "id",
            children: 'children',
            label: 'label'
        },
        defaultCheckedMenuId: [1,4]
    },
    methods: {
        showcheckedids: function () {
            console.log("getCheckedKeys\t  " + this.$refs.tree.getCheckedKeys());
        },
        append (node, data) {
            console.log(node, data);

            var doCheck = !node.checked;

            var childs = [data.id];
            this.recusion(data.children, childs);
            console.log(childs);

            if(childs){
                for(var i=0; i<childs.length; i++){
                    this.$refs.tree.setChecked(childs[i], doCheck);
                }
            }

        },
        recusion: function(list, childs){
            if(!list) return;

            for(var i=0; i<list.length; i++ ){
                var cur = list[i];
                childs.push(cur.id);

                if(cur.children){
                    this.recusion(cur.children, childs);     
                } 
            }
        },
        remove (item) {
            console.log(item, 'remove')
        },
    }
})

  </script>
</html>