el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
實(shí)現(xiàn)懶加載tree,需要為tree組件添加lazy和:load="load"
首先,load屬性綁定一個(gè)懶加載函數(shù),當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí)觸發(fā)
一般是通過(guò)樹節(jié)點(diǎn)id請(qǐng)求后端接口,添加新的節(jié)點(diǎn)數(shù)據(jù),但我最近遇到的是后端一次性返回上千條數(shù)據(jù)(樹數(shù)組結(jié)構(gòu)),由前端進(jìn)行處理實(shí)現(xiàn)懶加載
我們來(lái)看下怎么實(shí)現(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方法會(huì)回調(diào)兩個(gè)參數(shù),第一個(gè)是節(jié)點(diǎn)信息node,第二個(gè)是加載函數(shù)resolve
- resolve會(huì)默認(rèn)觸發(fā)一次,并且node.level===0,所以就不用在created中請(qǐng)求后端數(shù)據(jù)了,直接在默認(rèn)觸發(fā)中請(qǐng)求后端數(shù)據(jù)
- 如果node.level===0說(shuō)明是默認(rèn)觸發(fā),直接resolve請(qǐng)求后端返回的樹數(shù)組數(shù)據(jù),el-tree懶加載情況下只會(huì)渲染數(shù)組的第一級(jí),不會(huì)渲染數(shù)組的children
- 在默認(rèn)觸發(fā)的時(shí)候?qū)鋽?shù)組轉(zhuǎn)成扁平數(shù)組,后續(xù)懶加載節(jié)點(diǎn)的時(shí)候從扁平數(shù)組里取就可以了
- 因?yàn)閼屑虞d樹無(wú)法判斷有沒(méi)有子節(jié)點(diǎn),所以必須手動(dòng)添加leaf:true,才能取消左側(cè)的小箭頭,在樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組時(shí)給沒(méi)有子節(jié)點(diǎn)的數(shù)組對(duì)象加上這一屬性
- 很多時(shí)候需要默認(rèn)展開樹節(jié)點(diǎn),比如選中第一級(jí)下第一個(gè)節(jié)點(diǎn),在nextTick中nodedata.expanded = true來(lái)展開節(jié)點(diǎn),nodedata.loadData()再次觸發(fā)resolve函數(shù)
methods: {
/** 傳遞一個(gè)懶加載函數(shù)給el-tree組件 */
load(node, resolve) {
this.chooseNode = node;
// 這里后端給的數(shù)據(jù)唯一標(biāo)識(shí)不是id,是key,根據(jù)個(gè)人數(shù)據(jù)修改
this.getTreeData(node.level, node.data.key, resolve);
},
/** 懶加載樹節(jié)點(diǎn)數(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(() => {
// 零級(jí)的第一個(gè)子節(jié)點(diǎn),也就是第一級(jí)的第一個(gè)節(jié)點(diǎn)
let nodedata = this.chooseNode.childNodes[0];
nodedata.expanded = true;
// 再次觸發(fā)load方法
nodedata.loadData();
// 注意,因?yàn)樯戏皆俅斡|發(fā)load方法,走了this.chooseNode = node;這一步,所以這里的 this.chooseNode指向的是零級(jí)的子節(jié)點(diǎn),也就是第一級(jí),這里的`this.chooseNode.childNodes[0]`表示的是是第二級(jí)的第一個(gè)節(jié)點(diǎn)
this.currentNodeKey = this.chooseNode.childNodes[0].data.key;
this.handleNodeClick(this.chooseNode.childNodes[0].data);
});
} else {
resolve([]);
}
this.loading = false;
} else {
// 根據(jù)key去找到點(diǎn)擊樹節(jié)點(diǎn)的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++) {
// 給所有沒(méi)有子節(jié)點(diǎn)的節(jié)點(diǎn)添加leaf屬性,該屬性用來(lái)取消左側(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;
},
/** 獲取點(diǎn)擊樹節(jié)點(diǎn)的數(shù)據(jù),進(jìn)行渲染右側(cè)頁(yè)面等操作 */
handleNodeClick(data) {
},
},到此這篇關(guān)于el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)的文章就介紹到這了,更多相關(guān)el-tree樹組件懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08

