不是这样的，我的el-tree在同一个页面，el-tree通过slot在右侧加了el-checkbox，请在我描述的这个结构上，实现上述功能

在这种情况下，你可以在`el-tree`的每个节点上直接添加`el-checkbox`，并利用`v-model`绑定一个数组来管理所有节点的选中状态。同时，你可以添加一个自定义指令来处理节点的选中状态和递归更新。

首先，在`TreeItem`组件里：

<!-- TreeItem.vue -->
<template>
  <li>
    <span @click="toggleChild" :class="{ checked: isChecked }">{{ node.label }}</span>
    <!-- 右侧添加el-checkbox -->
    <el-checkbox :indeterminate="isIndeterminate" v-model="selectedIds" :key="node.id">{{ node.label }}</el-checkbox>
  </li>
</template>

<script>
export default {
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      selectedIds: [], // 存储选中的节点ID
      isIndeterminate: false, // 用于表示是否部分选择
    };
  },
  directives: {
    syncCheckboxState: {
      bind(el, binding, vnode) {
        el.addEventListener('change', () => {
          vnode.context.selectedIds.includes(vnode.context.node.id) ? vnode.context.selectedIds.splice(vnode.context.selectedIds.indexOf(vnode.context.node.id), 1) : vnode.context.selectedIds.push(vnode.context.node.id);
          // 更新其他子节点和父节点的状态
          this.updateRecursive(vnode.context.node);
        });
      },
    },
  },
  methods: {
    toggleChild() {
      this.isIndeterminate = this.selectedIds.some(id => this.$parent.nodes.some(n => n.id === id));
      this.selectedIds = [this.node.id];
      this.updateRecursive(this.node);
    },
    updateRecursive(node) {
      // 递归遍历更新子节点
      for (const child of node.children) {
        if (child.id === this.node.id) continue; // 跳过自身
        this.$set(child, 'selectedIds', this.selectedIds.includes(child.id) ? [] : [child.id]);
        this.updateRecursive(child);
      }
      if (node.parent && node.parent.children.includes(this.node)) {
        // 更新父节点状态
        this.$set(node.parent, 'selectedIds', node.parent.selectedIds.filter(id => id !== this.node.id));
        this.updateRecursive(node.parent);
      }
    },
  },
};
</script>

然后，在父组件中接收并处理节点状态：

<!-- ParentComponent.vue -->
<el-tree :data="nodes" :props="treeProps" slot="default" slot-scope="scope">
  <template #default="{ node }">
    <TreeItem :node="node" />
  </template>
</el-tree>
<el-checkbox v-model="globalSelected" @change="updateGlobalSelection">全局选中</el-checkbox>

<script>
export default {
  data() {
    return {
      nodes: [],
      globalSelected: [], // 全局状态的复选框
      treeProps: {}, // 树形节点的样式属性
    };
  },
  methods: {
    updateGlobalSelection() {
      this.globalSelected = this.nodes.some(node => node.selectedIds.length > 0);
    },
  },
};
</script>

在这个结构中，每次点击左侧节点或右侧的`el-checkbox`，都会通过`syncCheckboxState`指令以及`updateRecursive`方法来更新整个节点树的选中状态。`updateGlobalSelection`则会同步全局的`el-checkbox`状态。