vue实现目录树结构

下面是 Vue 实现目录树结构的攻略。

使用 ElementUI 的 Tree

如果你的 Vue 项目已经引入了 ElementUI，可以直接使用它提供的 ElTree 组件。该组件支持异步加载数据，自定义节点内容等功能，使用起来十分便捷。

代码示例

<template>
  <el-tree
    :data="treeData"
    v-on:node-click="handleNodeClick"
    :props="{ label: 'name', children: 'children' }"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '第一级目录',
          children: [
            {
              id: 2,
              name: '第二级目录',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

上面的代码实现了一个简单的两层目录树，单击节点时控制台会输出该节点的数据对象。

使用自定义组件的递归嵌套方式

如果你希望实现一个更加复杂的树形结构，并且想要对节点的样式、内容等进行更多的自定义，可以使用递归嵌套的方式自行编写组件。

代码示例

<template>
  <tree-node v-bind:data="treeData" />
</template>

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

export default {
  components: {
    TreeNode,
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: '第一层目录',
        children: [
          {
            id: 2,
            name: '第二层目录',
            children: [
              {
                id: 3,
                name: '第三层目录',
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

<!-- TreeNode.vue -->
<template>
  <div>
    <div class="node" v-on:click="handleClick">
      {{ data.name }}
    </div>
    <ul v-if="data.children">
      <li v-for="child in data.children" :key="child.id">
        <tree-node :data="child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    handleClick() {
      console.log(this.data);
    },
  },
};
</script>

上面的代码实现了一棵 3 层深度的目录树结构，每个节点支持点击事件并输出节点的数据对象。

以上便是 Vue 实现目录树结构的完整攻略，希望可以对你有所帮助。