当前位置：首页 > VUE

vue文件树实现

2026-01-18 15:55:50VUE

Vue 文件树实现

实现文件树功能通常需要递归组件和动态数据加载。以下是一个基于 Vue 3 的完整实现方案：

数据结构设计

文件树的数据结构通常为嵌套对象数组，每个节点包含以下属性：

const treeData = [
  {
    id: 1,
    name: 'Folder 1',
    type: 'folder',
    children: [
      {
        id: 2,
        name: 'File 1-1',
        type: 'file'
      }
    ]
  }
]

递归组件实现

创建 TreeItem.vue 作为递归组件：

<template>
  <li>
    <div @click="toggle">
      {{ node.name }}
      <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
    </div>
    <ul v-show="isOpen" v-if="isFolder">
      <TreeItem
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    isFolder() {
      return this.node.type === 'folder' && this.node.children
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

主组件调用

在父组件中使用递归组件：

<template>
  <ul class="file-tree">
    <TreeItem
      v-for="node in treeData"
      :key="node.id"
      :node="node"
    />
  </ul>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [...] // 你的树形数据
    }
  }
}
</script>

<style>
.file-tree ul {
  padding-left: 20px;
  list-style: none;
}
.file-tree li {
  cursor: pointer;
}
</style>

动态加载优化

对于大型文件树，可以实现懒加载：

vue文件树实现

methods: {
  async toggle() {
    if (this.isFolder) {
      if (!this.node.children) {
        this.node.children = await this.loadChildren(this.node.id)
      }
      this.isOpen = !this.isOpen
    }
  }
}