使用antdesignvue实现树形折叠面板

Ant Design Vue 提供了 Tree 组件和 Collapse 组件，可以很方便地实现树形折叠面板。下面是一个简单的示例：

<template>
  <a-collapse>
    <a-collapse-panel :header="root.name" :key="root.id">
      <a-tree :data="root.children" :default-expanded-keys="expandedKeys" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { ACollapse, ACollapsePanel, ATree } from 'ant-design-vue'

export default {
  components: {
    ACollapse,
    ACollapsePanel,
    ATree
  },
  data() {
    return {
      root: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Node 1',
            children: [
              {
                id: 3,
                name: 'Leaf 1'
              },
              {
                id: 4,
                name: 'Leaf 2'
              }
            ]
          },
          {
            id: 5,
            name: 'Node 2',
            children: [
              {
                id: 6,
                name: 'Leaf 3'
              },
              {
                id: 7,
                name: 'Leaf 4'
              }
            ]
          }
        ]
      },
      expandedKeys: ['2', '5']
    }
  }
}
</script>

在上面的示例中，我们使用 ACollapse 和 ACollapsePanel 组件创建折叠面板，使用 ATree 组件创建树形结构。我们将根节点的 children 属性作为 ATree 的 data 属性传递，然后使用 default-expanded-keys 属性指定需要默认展开的节点。在 ACollapsePanel 的 header 属性中，我们显示根节点的名称。