当前位置：首页 > VUE

vue中实现目录树‘

2026-01-21 00:55:22VUE

实现目录树的基本思路

在Vue中实现目录树通常需要递归组件来处理嵌套结构。目录树的数据通常是一个包含子节点的树形结构，每个节点可能有自己的子节点。

数据准备

准备一个树形结构的数据，例如：

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

递归组件实现

创建一个递归组件来渲染目录树：

vue中实现目录树‘

<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.name }}
      <tree-node v-if="item.children && item.children.length" :treeData="item.children"/>
    </li>
  </ul>
</template>

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

在主组件中使用

在主组件中引入并使用这个递归组件：

<template>
  <div>
    <h2>目录树</h2>
    <tree-node :treeData="treeData"/>
  </div>
</template>

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

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

添加交互功能

可以为目录树添加展开/折叠功能：

vue中实现目录树‘

<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      <span @click="toggle(item)">{{ item.name }}</span>
      <tree-node 
        v-if="item.children && item.children.length && item.expanded" 
        :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

样式美化

添加一些CSS样式使目录树更美观：

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

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

span:hover {
  color: #42b983;
  font-weight: bold;
}

动态加载数据

对于大型目录树，可以实现动态加载子节点：

methods: {
  async toggle(item) {
    if (!item.childrenLoaded && !item.children.length) {
      const children = await this.loadChildren(item.id)
      this.$set(item, 'children', children)
      this.$set(item, 'childrenLoaded', true)
    }
    this.$set(item, 'expanded', !item.expanded)
  },
  loadChildren(id) {
    // 这里实现API调用获取子节点数据
  }
}