el-tree-transfer穿梭框全选

你可以在el-tree-transfer组件上添加一个全选的复选框，然后使用它来控制所有节点的选中状态。以下是一个示例代码：

<template>
  <el-tree-transfer
    :data="data"
    :titles="['Source', 'Target']"
    :filterable="true"
    :props="treeProps"
    :left-default-checked="leftChecked"
    :right-default-checked="rightChecked"
    :render-content="renderContent"
    :format="format"
    :show-all-levels="false"
  >
    <template v-slot:default="{ node, data }">
      <el-checkbox v-model="node.checked" @change="handleCheckChange(node, data)">
        {{ node.label }}
      </el-checkbox>
    </template>
    <template v-slot:footer>
      <el-checkbox v-model="allChecked" @change="handleAllCheckedChange">
        Check All
      </el-checkbox>
    </template>
  </el-tree-transfer>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1-1',
            },
            {
              id: 3,
              label: 'Node 1-2',
            },
          ],
        },
        {
          id: 4,
          label: 'Node 2',
          children: [
            {
              id: 5,
              label: 'Node 2-1',
            },
            {
              id: 6,
              label: 'Node 2-2',
            },
          ],
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label',
      },
      leftChecked: [1, 2],
      rightChecked: [],
      allChecked: false,
    };
  },
  methods: {
    handleCheckChange(node, data) {
      this.updateAllChecked();
    },
    handleAllCheckedChange(value) {
      this.allChecked = value;
      this.updateAllNodesChecked(value);
    },
    updateAllChecked() {
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      const nodes = this.$refs.tree.getHalfCheckedNodes().concat(checkedNodes);
      const allChecked = nodes.length === this.data.length;
      this.allChecked = allChecked;
    },
    updateAllNodesChecked(value) {
      const nodes = this.$refs.tree.getNodes();
      nodes.forEach((node) => {
        node.checked = value;
      });
    },
    renderContent(h, { node }) {
      return <span class="custom-tree-node">{node.label}</span>;
    },
    format({ id, label }) {
      return { key: id, label };
    },
  },
};
</script>

在这个示例中，我们添加了一个全选的复选框到穿梭框的底部，并使用`handleAllCheckedChange`方法来控制所有节点的选中状态。我们还使用`updateAllChecked`方法来更新全选状态，以便在节点选中或取消选中时自动更新。最后，我们使用自定义插槽来渲染每个节点的复选框。