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ā)
一般是通過樹節(jié)點(diǎn)id請(qǐng)求后端接口,添加新的節(jié)點(diǎn)數(shù)據(jù),但我最近遇到的是后端一次性返回上千條數(shù)據(jù)(樹數(shù)組結(jié)構(gòu)),由前端進(jìn)行處理實(shí)現(xiàn)懶加載
我們來看下怎么實(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說明是默認(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樹無法判斷有沒有子節(jié)點(diǎn),所以必須手動(dòng)添加leaf:true,才能取消左側(cè)的小箭頭,在樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組時(shí)給沒有子節(jié)點(diǎn)的數(shù)組對(duì)象加上這一屬性
- 很多時(shí)候需要默認(rèn)展開樹節(jié)點(diǎn),比如選中第一級(jí)下第一個(gè)節(jié)點(diǎn),在nextTick中nodedata.expanded = true來展開節(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++) { // 給所有沒有子節(jié)點(diǎn)的節(jié)點(diǎn)添加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; }, /** 獲取點(diǎn)擊樹節(jié)點(diǎn)的數(shù)據(jù),進(jìn)行渲染右側(cè)頁面等操作 */ 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īng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08