el-tree 懒加载 loadNode

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

基本用法

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

核心参数

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

【完整代码】

<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>