antdesignvue3树形表格组件代码

Ant Design Vue 3 中的 Tree 组件是一个用于展示层级结构的数据列表，它常用于导航菜单、文件系统等场景。以下是使用 Ant Design Vue 的 `Tree` 组件的基本代码示例：

<template>
  <a-tree :data="treeData" @select="handleSelect">
    <!-- a-tree-item 是 Tree 元素 -->
    <a-tree-node :key="item.id" v-for="(item, index) in treeData" :title="item.name">
      {{ item.name }}
      <!-- 如果有子节点，可以继续嵌套使用 a-tree-node -->
      <a-tree-node v-if="item.children && item.children.length > 0" :key="item.children[index].id">
        {{ item.children[index].name }}
      </a-tree-node>
    </a-tree-node>
  </a-tree>
</template>

<script setup>
import { Tree } from 'ant-design-vue';

const treeData = [
  {
    title: '父级 1',
    key: '0-0',
    children: [
      { title: '子级 1-1', key: '0-0-1' },
      { title: '子级 1-2', key: '0-0-2' }
    ]
  },
  // ...其他数据项...
];

function handleSelect(node) {
  console.log('节点被选中:', node);
}
</script>

在这个例子中，`treeData` 是树形数据，每个对象包含 `title`（名称）、`key`（唯一标识符）和 `children`（子节点数组）。`handleSelect` 函数会在用户点击节点时被触发。