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

