实现有多个可控制下级菜单的复选框的el-tree

要实现多个可控制下级菜单的复选框的el-tree，可以使用el-tree的节点插槽（node slot）和scoped slot来实现。

首先，在el-tree中添加一个节点插槽，用于自定义节点的内容。然后，在节点插槽中使用scoped slot来自定义节点的复选框。

scoped slot可以接收一个参数，该参数包含当前节点的数据和节点深度等信息。在scoped slot中，可以根据当前节点的数据和深度等信息来决定该节点下方的子节点是否可见或可选中。

以下是一个示例代码：

<template>
  <el-tree :data="data">
    <template #default="{ node, data }">
      <span>{{ node.label }}</span>
      <el-checkbox v-model="data.checked" @change="handleCheckChange(data, $event)">选中</el-checkbox>
      <template v-if="node.children">
        <el-tree :data="node.children">
          <template #default="{ node, data }">
            <span>{{ node.label }}</span>
            <el-checkbox v-model="data.checked" :indeterminate="data.indeterminate" @change="handleCheckChange(data, $event)">选中</el-checkbox>
          </template>
        </el-tree>
      </template>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "节点1",
          checked: false,
          children: [
            {
              label: "子节点1",
              checked: false
            },
            {
              label: "子节点2",
              checked: false
            }
          ]
        },
        {
          label: "节点2",
          checked: false,
          children: [
            {
              label: "子节点3",
              checked: false
            },
            {
              label: "子节点4",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleCheckChange(data, event) {
      if (data.children) {
        this.checkChildren(data.children, event.target.checked);
        this.checkParent(data);
      } else {
        this.checkParent(data);
      }
    },
    checkChildren(children, checked) {
      children.forEach(child => {
        child.checked = checked;
        if (child.children) {
          this.checkChildren(child.children, checked);
        }
      });
    },
    checkParent(data) {
      let parent = this.getParent(data);
      if (parent) {
        let checkedCount = 0;
        let uncheckedCount = 0;
        parent.children.forEach(child => {
          if (child.checked) {
            checkedCount++;
          } else {
            uncheckedCount++;
          }
        });
        if (checkedCount === parent.children.length) {
          parent.checked = true;
          parent.indeterminate = false;
        } else if (uncheckedCount === parent.children.length) {
          parent.checked = false;
          parent.indeterminate = false;
        } else {
          parent.checked = false;
          parent.indeterminate = true;
        }
        this.checkParent(parent);
      }
    },
    getParent(data) {
      let parent = null;
      let current = this.data;
      let findParent = function(children) {
        children.forEach(child => {
          if (child === data) {
            parent = current;
          } else if (child.children) {
            current = child;
            findParent(child.children);
          }
        });
      };
      findParent(this.data);
      return parent;
    }
  }
};
</script>

在该示例代码中，el-tree的每个节点都包含一个复选框，用户可以选择或取消选择该节点。如果该节点有子节点，用户选择或取消选择该节点时，其子节点的复选框也会随之变化。如果该节点的所有子节点都被选中，该节点的复选框也会被选中；如果该节点的所有子节点都未被选中，该节点的复选框也会被取消选中；否则，该节点的复选框会处于半选中状态。

同时，该示例代码还使用了一个名为`getParent`的方法，该方法用于获取一个节点的父节点。当用户选择或取消选择一个节点时，该方法会递归查找该节点的父节点，并计算其子节点的选中状态，从而更新父节点的复选框状态。