当前位置：首页 > VUE

vue实现目录树

2026-03-08 11:00:07VUE

Vue 实现目录树

在 Vue 中实现目录树通常需要递归组件来处理嵌套结构。以下是实现目录树的具体方法。

数据准备

目录树的数据通常是一个嵌套结构的对象数组，每个对象包含 label 和可选的 children 属性。例如：

const treeData = [
  {
    label: '目录1',
    children: [
      { label: '子目录1-1' },
      { label: '子目录1-2' }
    ]
  },
  {
    label: '目录2',
    children: [
      {
        label: '子目录2-1',
        children: [
          { label: '子目录2-1-1' }
        ]
      }
    ]
  }
]

递归组件实现

创建一个递归组件 TreeItem 来处理嵌套的目录结构。在组件模板中，通过 v-for 遍历子节点，并递归调用自身。

vue实现目录树

<template>
  <ul>
    <li v-for="(item, index) in data" :key="index">
      {{ item.label }}
      <TreeItem v-if="item.children" :data="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

主组件调用

在主组件中引入 TreeItem 并传入目录数据。

<template>
  <div>
    <h2>目录树</h2>
    <TreeItem :data="treeData" />
  </div>
</template>

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

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [
        // 数据同上
      ]
    }
  }
}
</script>

样式优化

为目录树添加基础样式，使其更直观。可以通过 CSS 调整缩进和交互效果。

vue实现目录树

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
  cursor: pointer;
}

li:hover {
  background-color: #f0f0f0;
}

交互功能扩展

添加展开/折叠功能，通过 v-if 或 v-show 控制子目录的显示与隐藏。

<template>
  <ul>
    <li v-for="(item, index) in data" :key="index">
      <span @click="toggle(item)">
        {{ item.label }}
        <span v-if="item.children">[{{ item.expanded ? '-' : '+' }}]</span>
      </span>
      <TreeItem
        v-if="item.children && item.expanded"
        :data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(item) {
      if (item.children) {
        item.expanded = !item.expanded
      }
    }
  }
}
</script>

动态加载数据

对于大型目录树，可以通过动态加载子节点优化性能。在点击时异步加载数据。

methods: {
  async loadChildren(item) {
    if (!item.children) {
      const res = await fetch(`/api/children?id=${item.id}`)
      item.children = await res.json()
    }
    item.expanded = !item.expanded
  }
}