SoFunction
Updated on 2025-04-12

Implementation of lazy loading of el-tree loadNode

Need to use lazy and load properties together

<el-tree 
         :data="treeData" 
         :props="defaultProps" 
         :load="loadNode" 
         @node-click="handleNodeClick" 
         lazy>
</el-tree>
data() {
    return {
        treeDataList: [],
        defaultProps: {
            id: 'id',
            label: 'name',
            children: 'children',
            parentId:'parentId',
            isLeaf: false,// Specify whether the node is a leaf node, it only takes effect if the lazy attribute is specified        },
    }
},
loadNode(node, resolve) {    
    let that = this;
    if ( === 0) {
        (resolve);//Get top-level node data    }
    if ( &gt;= 1) {
        (, resolve);//Asynchronously obtain child node data        return resolve([]); // Prevent the circles from happening when the node has no child nodes    }
},

Get top-level node data:

getFatherData(resolve) { 
    let options = {
        url: '',
        data: {
            parentId: 0
        }
    }
    let res = await $.(options)
    if(){
        let data = ;
        (item => {
            item={...item,isLeaf:true}
        });
        resolve(data)
    }
},

Get child node data:

getChildrenData(parentId, resolve) { 
       let options = {
            url: '',
            data: {
                parentId
            }
        }
        let res = await $.(options)
        if(){
            let data = ;
            (item => {
                item={...item,isLeaf:false}
            });
            resolve(data)
        } 
    },

This is the end of this article about the implementation of lazy loading of el-tree loadNode. For more related content about lazy loading of el-tree loadNode, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!