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>