el-tree 懒加载 loadNode

我在北京coding2025-07-13 14:33

el-tree 是 Element UI 提供的树形组件，其懒加载功能通过 loadNode 方法实现，可以在用户展开节点时动态加载子节点数据，避免一次性加载大量数据。下面介绍 loadNode 的具体用法和示例。

基本用法

loadNode 是 el-tree 的一个重要属性，用于定义节点加载的回调函数。当用户展开一个节点时，会触发该回调并传入当前节点的信息，开发者可根据这些信息异步加载子节点数据。

核心参数

node：当前点击的节点对象，包含节点的层级、数据等信息。
resolve：回调函数，用于将加载的子节点数据传递给树组件。

【完整代码】

html 复制代码

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

<script>
export default {
  data() {
    return {
      treeProps: {
        label: 'name', // 指定节点标签为数据中的 name 字段
        children: 'children' // 指定子节点为数据中的 children 字段
      }
    };
  },
  methods: {
    // 懒加载回调函数
    loadNode(node, resolve) {
      // 根节点（node.level === 0）通常是初始节点
      if (node.level === 0) {
        // 模拟异步加载根节点数据
        setTimeout(() => {
          const data = [
            { id: 1, name: '节点1', leaf: false },
            { id: 2, name: '节点2', leaf: false }
          ];
          resolve(data); // 将数据传递给树组件
        }, 500);
      } else {
        // 非根节点，根据父节点加载子节点
        setTimeout(() => {
          // 模拟根据父节点ID加载子节点数据
          const childData = [
            { id: `${node.data.id}-1`, name: `子节点1-${node.data.id}`, leaf: true },
            { id: `${node.data.id}-2`, name: `子节点2-${node.data.id}`, leaf: true }
          ];
          resolve(childData);
        }, 500);
      }
    },
    // 节点点击事件处理
    handleNodeClick(data) {
      console.log('点击节点:', data);
    }
  }
};
</script>