antdesign vue a-tree 如何全选

Ant Design Vue 中的 A-Tree 组件提供了一个 `checkable` 属性来实现全选功能。通过将 `checkable` 属性设置为 true，将会在每个节点旁边显示一个复选框，用户可以通过勾选这些复选框来选择节点。

如果您想要实现全选功能，可以在 A-Tree 的顶层节点上添加一个全选的复选框，并通过监听 `on-check` 事件来控制所有节点的选中状态。具体实现方法如下：

1. 在 A-Tree 的根节点上添加一个全选的复选框：

<a-tree :checkable="true" :checked-keys="checkedKeys" @check="handleCheck">
  <a-tree-node :title="rootTitle" :key="rootKey">
    <!-- 全选复选框 -->
    <template slot="title">
      <a-checkbox v-model="allChecked">全选</a-checkbox>
      {{ rootTitle }}
    </template>
    <!-- 树节点 -->
    <a-tree-node v-for="node in nodes" :title="node.title" :key="node.key"></a-tree-node>
  </a-tree-node>
</a-tree>

2. 在 Vue 实例中定义 `allChecked` 和 `checkedKeys` 变量，并在 `handleCheck` 方法中更新所有节点的选中状态：

data() {
  return {
    allChecked: false, // 全选状态
    checkedKeys: [], // 选中的节点 key
    nodes: [...] // 树节点数据
  }
},
methods: {
  handleCheck(checkedKeys) {
    // 更新选中状态
    this.checkedKeys = checkedKeys;

    // 如果全选复选框被勾选，则选中所有节点；否则取消所有节点的选中状态
    if (this.allChecked) {
      this.$refs.tree.setCheckedKeys(this.nodes.map(node => node.key));
    } else {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
}

3. 在 A-Tree 上添加一个 `ref` 属性，以便在 Vue 实例中引用该组件：

<a-tree ref="tree" ...>

现在，您可以通过勾选顶层树节点旁边的全选复选框来实现 A-Tree 的全选功能了。