vue实现文件夹目录结构

Vue可以通过递归组件实现文件夹目录结构。具体实现步骤如下：

1. 创建一个组件，用来表示文件夹或文件的节点，包括名称、类型等信息。

2. 在这个组件中，根据当前节点是否为文件夹，决定是否递归渲染子节点。

3. 在父组件中，通过递归调用这个节点组件，就可以实现整个目录结构的渲染。

以下是一个简单示例代码：

<template>
  <div>
    <ul>
      <node v-for="item in list" :item="item" :key="item.id"></node>
    </ul>
  </div>
</template>

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

export default {
  components: {
    Node,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

Node.vue 组件内容：

<template>
  <li>
    <span>{{ item.name }}</span>
    <ul v-if="item.type === 'folder'">
      <node v-for="child in item.children" :item="child" :key="child.id"></node>
    </ul>
  </li>
</template>

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

export default {
  components: {
    Node,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

在父组件中，使用以下方式渲染目录结构：

<template>
  <div>
    <directory :list="directory"></directory>
  </div>
</template>

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

export default {
  components: {
    Directory,
  },
  data() {
    return {
      directory: [
        {
          id: 1,
          name: 'folder1',
          type: 'folder',
          children: [
            {
              id: 2,
              name: 'file1',
              type: 'file',
            },
            {
              id: 3,
              name: 'file2',
              type: 'file',
            },
          ],
        },
        {
          id: 4,
          name: 'folder2',
          type: 'folder',
          children: [
            {
              id: 5,
              name: 'file3',
              type: 'file',
            },
          ],
        },
        {
          id: 6,
          name: 'file4',
          type: 'file',
        },
      ],
    };
  },
};
</script>

这样就可以实现一个简单的文件夹目录结构了。