vue tree view

<template>
  <div id="app">
    <tree-view :data="treeData"></tree-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    TreeView
  },
  data() {
    return {
      treeData: [
        {
          name: 'root',
          children: [
            { name: 'child 1' },
            { name: 'child 2', children: [{ name: 'grandchild 1' }] }
          ]
        }
      ]
    };
  }
};
</script>

<script>
// TreeView.vue
export default {
  name: 'TreeView',
  props: ['data'],
  template: `
    <ul>
      <li v-for="item in data" :key="item.name">
        {{ item.name }}
        <tree-view v-if="item.children" :data="item.children"></tree-view>
      </li>
    </ul>
  `
};
</script>

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

解释说明：

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

   • 定义了一个包含 TreeView 组件的根元素。
   • TreeView 组件接收一个 data 属性，该属性是一个包含树形结构数据的对象数组。

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

   • 定义了 Vue 应用程序的主组件 (App) 和树形视图组件 (TreeView)。
   • App 组件中定义了一个 treeData 数据属性，用于存储树形结构的数据。
   • TreeView 组件接收 data 属性，并递归地渲染子节点。

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

   • 添加了一些基本的样式，确保树形结构的缩进和显示效果。

这个示例展示了如何使用 Vue.js 创建一个简单的树形视图组件。通过递归调用自身，TreeView 组件可以处理任意深度的树形结构。