当前位置：首页 > VUE

vue实现树目录

2026-01-14 03:56:10VUE

vue实现树目录的方法

递归组件实现树形结构

使用递归组件是Vue中实现树形目录的常见方法。通过组件调用自身，可以处理任意层级的嵌套数据。

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div @click="toggle">{{node.name}}</div>
          <div v-show="expanded" v-if="node.children">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child">
            </tree-node>
          </div>
        </div>
      `,
      data() {
        return {
          expanded: false
        }
      },
      methods: {
        toggle() {
          this.expanded = !this.expanded
        }
      }
    }
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Child 1',
            children: []
          },
          {
            id: 3,
            name: 'Child 2',
            children: [
              {
                id: 4,
                name: 'Grandchild',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

使用第三方组件库

Element UI、Ant Design Vue等UI库提供了现成的树形组件，可以快速实现树形目录功能。

以Element UI为例：

vue实现树目录

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: 'Level 1',
        children: [{
          label: 'Level 2',
          children: [{
            label: 'Level 3'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

动态加载树节点

对于大数据量的树形结构，可以使用懒加载方式按需加载节点数据。

<template>
  <el-tree
    :props="props"
    :load="loadNode"
    lazy>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'Region' }])
      }
      if (node.level > 3) return resolve([])

      setTimeout(() => {
        const data = Array.from({ length: 5 }).map((_, i) => ({
          name: `Zone ${node.level}-${i}`,
          leaf: node.level >= 3
        }))
        resolve(data)
      }, 500)
    }
  }
}
</script>

自定义树形组件样式

通过CSS可以自定义树形组件的样式，使其更符合项目需求。

vue实现树目录

.tree-node {
  padding: 5px 0;
}

.tree-children {
  padding-left: 20px;
}

.toggle-icon {
  margin-right: 5px;
  cursor: pointer;
}

.node-content {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
}

.node-content:hover {
  background-color: #f0f0f0;
}

树形结构的数据处理

实现树形目录前需要处理好数据结构，常见的数据转换方法包括：

// 扁平数组转树形结构
function arrayToTree(items, id = 'id', parentId = 'parentId') {
  const result = []
  const itemMap = {}

  items.forEach(item => {
    itemMap[item[id]] = { ...item, children: [] }
  })

  items.forEach(item => {
    const treeItem = itemMap[item[id]]
    if (item[parentId]) {
      const parent = itemMap[item[parentId]]
      if (parent) parent.children.push(treeItem)
    } else {
      result.push(treeItem)
    }
  })

  return result
}

// 树形结构转扁平数组
function treeToArray(tree, result = []) {
  tree.forEach(node => {
    result.push(node)
    if (node.children && node.children.length) {
      treeToArray(node.children, result)
    }
  })
  return result
}