当前位置：首页 > VUE

vue tree实现懒加载

2026-01-21 07:23:40VUE

Vue Tree 实现懒加载的方法

懒加载（Lazy Load）是一种优化技术，适用于数据量大的树形结构。以下是实现 Vue Tree 懒加载的几种方法：

使用 Element UI 的 Tree 组件

Element UI 提供了 Tree 组件并支持懒加载功能。需要设置 lazy 属性和 load 方法。

vue tree实现懒加载

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

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        return resolve([{ name: 'Root' }]);
      }
      // 模拟异步加载子节点
      setTimeout(() => {
        const data = [
          { name: 'Child 1', leaf: true },
          { name: 'Child 2', leaf: false }
        ];
        resolve(data);
      }, 500);
    }
  }
}
</script>

使用自定义递归组件

如果需要更灵活的控制，可以自定义递归组件实现懒加载。

vue tree实现懒加载

<template>
  <div>
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
      @load-children="loadChildren"
    />
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        { id: 1, name: 'Root', children: [], loaded: false }
      ]
    }
  },
  methods: {
    loadChildren(node) {
      if (node.loaded) return;
      // 模拟异步加载
      setTimeout(() => {
        node.children = [
          { id: 2, name: 'Child 1', children: [], loaded: false },
          { id: 3, name: 'Child 2', children: [], loaded: false }
        ];
        node.loaded = true;
      }, 500);
    }
  }
}
</script>

结合 Vuex 管理状态

对于复杂应用，可以使用 Vuex 管理树形数据的状态。

// store.js
export default new Vuex.Store({
  state: {
    treeNodes: {
      1: { id: 1, name: 'Root', children: [2, 3], loaded: true },
      2: { id: 2, name: 'Child 1', children: [], loaded: false },
      3: { id: 3, name: 'Child 2', children: [], loaded: false }
    }
  },
  mutations: {
    setChildren(state, { parentId, children }) {
      const parent = state.treeNodes[parentId];
      parent.children = children.map(child => child.id);
      children.forEach(child => {
        state.treeNodes[child.id] = { ...child, loaded: false };
      });
      parent.loaded = true;
    }
  },
  actions: {
    async loadChildren({ commit }, parentId) {
      const children = await fetchChildren(parentId); // 模拟 API 调用
      commit('setChildren', { parentId, children });
    }
  }
});

使用第三方库

如 vue-lazy-tree 或 vue-virtual-tree 等专门针对懒加载优化的库。

npm install vue-lazy-tree

<template>
  <lazy-tree
    :data="treeData"
    :load-children="loadChildren"
  />
</template>

<script>
import LazyTree from 'vue-lazy-tree';

export default {
  components: { LazyTree },
  data() {
    return {
      treeData: [{ id: 1, name: 'Root', children: [] }]
    }
  },
  methods: {
    loadChildren(node) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { id: 2, name: 'Child 1', children: [] },
            { id: 3, name: 'Child 2', children: [] }
          ]);
        }, 500);
      });
    }
  }
}
</script>