el-tree loadNode懶加載的實現
需要 lazy、 load 兩個屬性一起用
<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,// 指定節點 是否為葉子節點,僅在指定瞭 lazy 屬性的情況下生效 }, } },
loadNode(node, resolve) { let that = this; if (node.level === 0) { that.getFatherData(resolve);//獲取頂級節點數據 } if (node.level >= 1) { this.getChildrenData(node.data.id, resolve);//異步獲取子節點數據 return resolve([]); // 防止在該節點沒有子節點時一直轉圈 } },
獲取頂級節點數據:
getFatherData(resolve) { let options = { url: '', data: { parentId: 0 } } let res = await $.fn.commonPlugin.commonAjaxRequest(options) if(res.flag){ let data = res.data; data.forEach(item => { item={...item,isLeaf:true} }); resolve(data) } },
獲取子節點數據:
getChildrenData(parentId, resolve) { let options = { url: '', data: { parentId } } let res = await $.fn.commonPlugin.commonAjaxRequest(options) if(res.flag){ let data = res.data; data.forEach(item => { item={...item,isLeaf:false} }); resolve(data) } },
到此這篇關於el-tree loadNode懶加載的實現的文章就介紹到這瞭,更多相關el-tree loadNode懶加載內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- elementui中使用el-tree控件懶加載和局部刷新
- element tree懶加載:load="loadNode"隻觸發一次的解決方案
- vue中的el-tree @node-click傳自定義參數
- Vue使用el-tree 懶加載進行增刪改查功能的實現
- element-ui tree 手動展開功能實現(異步樹也可以)