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 ( >= 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!