el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進行處理)
實現(xiàn)懶加載tree,需要為tree組件添加lazy和:load="load"
首先,load屬性綁定一個懶加載函數(shù),當點擊節(jié)點時觸發(fā)
一般是通過樹節(jié)點id請求后端接口,添加新的節(jié)點數(shù)據(jù),但我最近遇到的是后端一次性返回上千條數(shù)據(jù)(樹數(shù)組結(jié)構(gòu)),由前端進行處理實現(xiàn)懶加載
我們來看下怎么實現(xiàn)
<el-tree
ref="tree"
lazy
:load="load"
highlight-current
@node-click="handleNodeClick"
:expand-on-click-node="false"
:node-key="key"
:props="defaultProps"
:current-node-key="currentNodeKey"
>
</el-tree>
- load方法會回調(diào)兩個參數(shù),第一個是節(jié)點信息node,第二個是加載函數(shù)resolve
- resolve會默認觸發(fā)一次,并且node.level===0,所以就不用在created中請求后端數(shù)據(jù)了,直接在默認觸發(fā)中請求后端數(shù)據(jù)
- 如果node.level===0說明是默認觸發(fā),直接resolve請求后端返回的樹數(shù)組數(shù)據(jù),el-tree懶加載情況下只會渲染數(shù)組的第一級,不會渲染數(shù)組的children
- 在默認觸發(fā)的時候?qū)鋽?shù)組轉(zhuǎn)成扁平數(shù)組,后續(xù)懶加載節(jié)點的時候從扁平數(shù)組里取就可以了
- 因為懶加載樹無法判斷有沒有子節(jié)點,所以必須手動添加leaf:true,才能取消左側(cè)的小箭頭,在樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組時給沒有子節(jié)點的數(shù)組對象加上這一屬性
- 很多時候需要默認展開樹節(jié)點,比如選中第一級下第一個節(jié)點,在nextTick中nodedata.expanded = true來展開節(jié)點,nodedata.loadData()再次觸發(fā)resolve函數(shù)
methods: {
/** 傳遞一個懶加載函數(shù)給el-tree組件 */
load(node, resolve) {
this.chooseNode = node;
// 這里后端給的數(shù)據(jù)唯一標識不是id,是key,根據(jù)個人數(shù)據(jù)修改
this.getTreeData(node.level, node.data.key, resolve);
},
/** 懶加載樹節(jié)點數(shù)據(jù)處理函數(shù) */
async getTreeData(level, key, resolve) {
if (level === 0) {
this.loading = true;
const { data: res } = await http.post('getTreeNode');
if (res.code === 200 && res.data && res.data.length) {
this.treeData = this.treeArrayToArray(res.data);
resolve(res.data);
this.$nextTick(() => {
// 零級的第一個子節(jié)點,也就是第一級的第一個節(jié)點
let nodedata = this.chooseNode.childNodes[0];
nodedata.expanded = true;
// 再次觸發(fā)load方法
nodedata.loadData();
// 注意,因為上方再次觸發(fā)load方法,走了this.chooseNode = node;這一步,所以這里的 this.chooseNode指向的是零級的子節(jié)點,也就是第一級,這里的`this.chooseNode.childNodes[0]`表示的是是第二級的第一個節(jié)點
this.currentNodeKey = this.chooseNode.childNodes[0].data.key;
this.handleNodeClick(this.chooseNode.childNodes[0].data);
});
} else {
resolve([]);
}
this.loading = false;
} else {
// 根據(jù)key去找到點擊樹節(jié)點的children數(shù)組,加載數(shù)據(jù)到其下
const currentNode = this.treeData.find(item => item.key === key);
if (currentNode.children && currentNode.children.length) {
resolve(currentNode.children);
} else {
resolve([]);
}
}
},
/** 樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組 */
treeArrayToArray(tree) {
const arr = [];
function recursiveFunction(tree) {
for (let i = 0; i < tree.length; i++) {
// 給所有沒有子節(jié)點的節(jié)點添加leaf屬性,該屬性用來取消左側(cè)小箭頭
if (!(tree[i].children && tree[i].children.length)) {
tree[i].leaf = true;
}
arr.push(tree[i]);
if (tree[i].children && tree[i].children.length) {
recursiveFunction(tree[i].children);
}
}
}
recursiveFunction(tree);
return arr;
},
/** 獲取點擊樹節(jié)點的數(shù)據(jù),進行渲染右側(cè)頁面等操作 */
handleNodeClick(data) {
},
},到此這篇關(guān)于el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進行處理)的文章就介紹到這了,更多相關(guān)el-tree樹組件懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue-upload-component封裝一個圖片上傳組件的示例
這篇文章主要介紹了基于vue-upload-component封裝一個圖片上傳組件的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題
這篇文章主要介紹了使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue3中是如何實現(xiàn)數(shù)據(jù)響應式示例詳解
這篇文章主要介紹了Vue3中是如何實現(xiàn)數(shù)據(jù)響應式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07

