vue 树形组件

<template>
  <div class="tree">
    <ul>
      <tree-node 
        v-for="(node, index) in treeData" 
        :key="index" 
        :node="node"
      />
    </ul>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  name: 'Tree',
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          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' }
          ]
        }
      ]
    };
  }
};
</script>

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

<!-- TreeNode.vue -->
<template>
  <li>
    {{ node.label }}
    <ul v-if="node.children && node.children.length">
      <tree-node 
        v-for="(child, index) in node.children" 
        :key="index" 
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
};
</script>

解释说明

1. Tree 组件:

   • Tree 组件是树形结构的根组件。
   • 它包含一个 ul 列表，用于显示树的顶层节点。
   • 使用 v-for 指令遍历 treeData 数组，并为每个节点渲染一个 TreeNode 组件。

2. TreeNode 组件:

   • TreeNode 组件负责递归地渲染树的每个节点。
   • 如果节点有子节点（即 children 属性存在且不为空），则会递归地渲染子节点。
   • 每个节点显示其 label 属性，并在有子节点时嵌套一个 ul 列表。

3. 数据结构:

   • treeData 是一个数组，每个元素是一个对象，表示树的一个节点。
   • 每个节点对象包含 id、label 和可选的 children 属性，children 是一个数组，表示该节点的子节点。

4. 样式:

   • 简单的 CSS 样式用于去掉默认的列表样式，并缩进子节点以形成层次结构。