ant-design-vue 如何实现让树选择收起展开的节点

Ant Design Vue 的 Tree 组件实现节点的收起和展开通常通过 `defaultExpandedKeys` 或者 `expandAndSelectChildren` 属性来控制。首先，你需要在数据初始化时设置默认展开的节点：

// 示例数据
const treeData = [
  {
    title: '根节点',
    key: '0-0',
    children: [
      { title: '子节点1', key: '0-0-1' },
      { title: '子节点2', key: '0-0-2', defaultExpand: true }, // 设置默认展开
    ]
  }
];

// 初始化组件
<template>
  <a-tree :data="treeData" ref="treeRef">
    <!-- 树形结构 -->
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData,
    };
  },
  mounted() {
    this.$refs.treeRef.expandAll(); // 展开所有节点
  },
};
</script>

然后，你可以提供一个方法来处理节点的选择和展开状态改变，比如点击事件：

methods: {
  toggleNode(node) {
    if (node.expanded) {
      this.$refs.treeRef.collapseNode(node.key); // 收起节点
    } else {
      this.$refs.treeRef.expandNode(node.key); // 展开节点
    }
  },
}

最后，在模板中监听节点的 click 事件并调用这个方法：

<a-tree
  :data="treeData"
  @select="handleNodeSelect"
  ref="treeRef"
>
  <!-- ... -->
</a-tree>

<script>
//...
methods: {
  // ...
  handleNodeSelect({ node }) {
    this.toggleNode(node);
  },
}
</script>

当用户点击节点时，会触发 `handleNodeSelect` 函数，进而切换节点的展开或收起状态。