当前位置：首页 > VUE

vue tree实现懒加载

2026-02-21 22:51:39VUE

实现 Vue Tree 懒加载的方法

在 Vue 中实现 Tree 组件的懒加载，可以通过以下步骤完成：

使用 Element UI 的 Tree 组件

Element UI 的 Tree 组件内置了懒加载功能，可以通过 lazy 属性和 load 方法实现。

vue tree实现懒加载

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

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

自定义 Tree 组件实现懒加载

如果需要自定义 Tree 组件，可以通过递归组件和动态加载数据的方式实现懒加载。

vue tree实现懒加载

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

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

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

使用 Vue 递归组件

在 TreeNode.vue 中实现递归渲染和懒加载逻辑。

<template>
  <div>
    <div @click="toggleChildren">
      {{ node.name }}
      <span v-if="hasChildren && !node.loaded"> (加载中...) </span>
    </div>
    <div v-if="showChildren">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @load-children="$emit('load-children', child)">
      </tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      showChildren: false
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length > 0;
    }
  },
  methods: {
    toggleChildren() {
      if (!this.node.loaded && this.hasChildren) {
        this.$emit('load-children', this.node);
      }
      this.showChildren = !this.showChildren;
    }
  }
}
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 vue-treeselect 或 vuejs-tree，它们通常内置了懒加载支持。

<template>
  <treeselect
    :options="options"
    :load-options="loadOptions"
    :async="true"
    :multiple="true">
  </treeselect>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
  components: { Treeselect },
  data() {
    return {
      options: []
    }
  },
  methods: {
    loadOptions({ action, parentNode, callback }) {
      if (action === 'LOAD_CHILDREN_OPTIONS') {
        setTimeout(() => {
          parentNode.children = [
            { id: 1, label: '子节点1' },
            { id: 2, label: '子节点2' }
          ];
          callback();
        }, 500);
      }
    }
  }
}
</script>