当前位置：首页 > VUE

vue实现列表树加载

2026-02-22 11:50:13VUE

vue实现列表树加载的方法

使用递归组件实现树形结构

创建一个递归组件，组件内部调用自身实现无限层级渲染。组件模板中通过v-for遍历当前层级数据，对每个节点判断是否有children属性决定是否继续渲染子节点。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node v-if="item.children" :tree-data="item.children"/>
    </li>
  </ul>
</template>

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

动态加载子节点数据

对于大数据量的树结构，可采用懒加载方式。在节点展开时通过事件触发数据加载，避免初始化时加载全部数据。

vue实现列表树加载

methods: {
  loadChildren(node) {
    if (!node.children || node.children.length === 0) {
      api.getChildren(node.id).then(res => {
        this.$set(node, 'children', res.data)
      })
    }
  }
}

使用第三方组件库

Element UI、Ant Design Vue等流行UI库提供现成的树形组件，可直接使用并配置相应属性。

vue实现列表树加载

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

性能优化技巧

大数据量情况下使用虚拟滚动技术，只渲染可视区域内的节点。可借助vue-virtual-scroller等库实现。

import { RecycleScroller } from 'vue-virtual-scroller'
components: {
  RecycleScroller
}

状态管理方案

复杂树结构建议使用Vuex或Pinia管理状态，便于跨组件共享数据和维护状态一致性。

const store = new Vuex.Store({
  state: {
    treeData: []
  },
  mutations: {
    updateTreeData(state, payload) {
      state.treeData = payload
    }
  }
})