el-tree?loadNode懶加載的實現(xiàn)
更新時間:2022年08月18日 12:03:47 作者:不能懶鴨
本文主要介紹了el-tree?loadNode懶加載的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
需要 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,// 指定節(jié)點 是否為葉子節(jié)點,僅在指定了 lazy 屬性的情況下生效 }, } },
loadNode(node, resolve) { let that = this; if (node.level === 0) { that.getFatherData(resolve);//獲取頂級節(jié)點數(shù)據(jù) } if (node.level >= 1) { this.getChildrenData(node.data.id, resolve);//異步獲取子節(jié)點數(shù)據(jù) return resolve([]); // 防止在該節(jié)點沒有子節(jié)點時一直轉圈 } },
獲取頂級節(jié)點數(shù)據(jù):
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) } },
獲取子節(jié)點數(shù)據(jù):
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懶加載的實現(xiàn)的文章就介紹到這了,更多相關el-tree loadNode懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法
本篇文章主要介紹了vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理
這篇文章主要為大家介紹了vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09