vue实现层级目录

Vue 实现层级目录的方法

使用递归组件实现

递归组件是处理层级目录的常见方式，通过组件自身调用自身来渲染嵌套结构。

目录数据结构示例

data() {
  return {
    items: [
      {
        name: '目录1',
        children: [
          { name: '子目录1' },
          { name: '子目录2' }
        ]
      },
      {
        name: '目录2',
        children: [
          {
            name: '子目录3',
            children: [
              { name: '子子目录1' }
            ]
          }
        ]
      }
    ]
  }
}

递归组件实现

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

<script>
export default {
  name: 'TreeMenu',
  props: ['items']
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的树形组件库：

1. Vue-Tree-View：轻量级树形视图组件

   npm install vue-tree-view

2. Element UI Tree：功能丰富的企业级树组件

   npm install element-ui

动态加载数据

对于大型目录结构，可以实现按需加载：

methods: {
  loadChildren(item) {
    if (!item.children && item.hasChildren) {
      // 调用API获取子目录
      fetchChildren(item.id).then(children => {
        this.$set(item, 'children', children)
      })
    }
  }
}

样式优化

为层级目录添加缩进和交互效果：

ul {
  padding-left: 20px;
}
li {
  cursor: pointer;
  transition: all 0.3s;
}
li:hover {
  background-color: #f5f5f5;
}

交互功能增强

添加展开/折叠功能：

<li v-for="(item, index) in items" :key="index">
  <span @click="toggle(item)">{{ item.expanded ? '-' : '+' }}</span>
  {{ item.name }}
  <tree-menu v-if="item.children && item.expanded" :items="item.children"></tree-menu>
</li>

methods: {
  toggle(item) {
    this.$set(item, 'expanded', !item.expanded)
  }
}

性能优化

对于大型目录结构，可以使用虚拟滚动：

npm install vue-virtual-scroller