vue3 tree组件

<template>
  <div class="tree">
    <ul>
      <tree-node 
        v-for="node in treeData" 
        :key="node.id" 
        :node="node"
      />
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import TreeNode from './TreeNode.vue';

export default {
  components: {
    TreeNode
  },
  setup() {
    const treeData = ref([
      {
        id: 1,
        label: 'Node 1',
        children: [
          { id: 2, label: 'Child Node 1' },
          { id: 3, label: 'Child Node 2' }
        ]
      },
      {
        id: 4,
        label: 'Node 2',
        children: [
          { id: 5, label: 'Child Node 3' }
        ]
      }
    ]);

    return {
      treeData
    };
  }
};
</script>

<style scoped>
.tree ul {
  list-style-type: none;
  padding-left: 20px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 ul 列表来展示树形结构。
   • 使用了自定义组件 tree-node 来递归渲染每个节点。
   • v-for 指令用于遍历 treeData 数组，生成每个节点。

2. 脚本部分 (<script>):

   • 导入了 Vue 3 的 ref 函数和自定义的 TreeNode 组件。
   • 定义了 treeData，这是一个包含节点信息的数组，每个节点可以有子节点（children）。
   • 使用 setup 函数返回 treeData，使其在模板中可用。

3. 样式部分 (<style scoped>):

   • 简单的样式设置，移除了 ul 的默认列表样式，并增加了左侧缩进，以更好地展示层级关系。

4. TreeNode.vue (假设的子组件代码):

   • 这个组件负责递归渲染每个节点及其子节点。你可以根据需要实现这个组件，通常它会检查当前节点是否有子节点，并递归调用自己来渲染子节点。

如果你需要完整的 TreeNode.vue 实现，可以进一步提供。