Vue 树状图组件实现：教程与示例

"要在 Vue 中创建一个树状图，可以使用 Vue 的组件来实现。以下是一个简单的示例：\n\n首先，创建一个名为TreeNode的组件，用来表示树中的每个节点：\n\nvue\n<template>\n <div>\n <span>{{ node.label }}</span>\n <ul>\n <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>\n </ul>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'TreeNode',\n props: {\n node: {\n type: Object,\n required: true\n }\n }\n}\n</script>\n\n\n然后，在根组件中使用TreeNode组件来构建整个树状图：\n\nvue\n<template>\n <div>\n <tree-node :node="tree"></tree-node>\n </div>\n</template>\n\n<script>\nimport TreeNode from './TreeNode.vue'\n\nexport default {\n name: 'Tree',\n components: {\n TreeNode\n },\n data() {\n return {\n tree: {\n label: 'Root',\n children: [\n {\n label: 'Node 1',\n children: [\n {\n label: 'Node 1.1',\n children: []\n },\n {\n label: 'Node 1.2',\n children: []\n }\n ]\n },\n {\n label: 'Node 2',\n children: [\n {\n label: 'Node 2.1',\n children: []\n },\n {\n label: 'Node 2.2',\n children: []\n }\n ]\n }\n ]\n }\n }\n }\n}\n</script>\n\n\n在上面的示例中，TreeNode组件通过递归地调用自身来构建树状图。每个节点都有一个label属性和一个children属性，用来表示节点的文本和子节点。\n\n通过在data选项中定义一个tree对象来表示整个树状图的结构。然后，在根组件的模板中使用TreeNode组件来渲染整个树状图。\n