vue实现递归目录

Vue 实现递归目录

在 Vue 中实现递归目录通常用于展示树形结构数据，例如文件系统、菜单导航等。以下是实现递归目录的几种常见方法。

使用递归组件

递归组件是 Vue 中实现树形结构的常用方式。通过组件调用自身，可以轻松实现无限层级的目录结构。

<template>
  <div>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <div v-if="isOpen && node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用 v-for 和计算属性

如果数据层级较浅，可以通过计算属性扁平化数据，再结合 v-for 渲染。

<template>
  <div>
    <div v-for="item in flattenedTree" :key="item.id" :style="{ paddingLeft: `${item.level * 20}px` }">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  computed: {
    flattenedTree() {
      const flatten = (nodes, level = 0) => {
        return nodes.reduce((acc, node) => {
          acc.push({ ...node, level })
          if (node.children) {
            acc.push(...flatten(node.children, level + 1))
          }
          return acc
        }, [])
      }
      return flatten(this.treeData)
    }
  }
}
</script>

使用第三方库

对于复杂的树形结构，可以使用现成的 Vue 树形组件库，如 vue-tree-list 或 element-ui 的 el-tree。

<template>
  <el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级目录',
          children: [
            {
              label: '二级目录',
              children: [
                { label: '三级目录' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

动态加载子节点

对于大型树形结构，可以通过动态加载子节点优化性能。

<template>
  <div>
    <div v-for="node in nodes" :key="node.id" @click="loadChildren(node)">
      {{ node.name }}
      <span v-if="node.hasChildren && !node.children">(点击加载)</span>
      <tree-node v-if="node.children" :nodes="node.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    loadChildren(node) {
      if (!node.children && node.hasChildren) {
        // 模拟异步加载
        setTimeout(() => {
          node.children = [
            { id: `${node.id}-1`, name: `${node.name}-子节点1`, hasChildren: false },
            { id: `${node.id}-2`, name: `${node.name}-子节点2`, hasChildren: false }
          ]
        }, 500)
      }
    }
  }
}
</script>

样式优化

为递归目录添加缩进和交互样式，提升用户体验。

.tree-node {
  margin-left: 20px;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

以上方法可以根据实际需求选择或组合使用，实现不同复杂度的递归目录功能。