vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
使用element tree實(shí)現(xiàn)懶加載,更新某一節(jié)點(diǎn)的數(shù)據(jù)
1.tree 懶加載
只需要在el-tree標(biāo)簽上面添加lazy,load屬性,load的接收是一個(gè)函數(shù)。這里貼上官網(wǎng)給出的方法
<el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node-key="nodeKey" @node-click="nodeClick" :expand-on-click-node="false" :props="defaultProps" ></el-tree>
2.load方法使用
// 懶加載獲取樹(shù)形結(jié)構(gòu) loadNode(node, resolve) { //調(diào)用接口時(shí),我們的需求是第一級(jí)傳參為0,后面為當(dāng)前節(jié)點(diǎn)的唯一表示id,可以根據(jù)需求而定 // node.level為0時(shí),就是tree的第一級(jí) const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => { resolve( data.data.map(item => { return { ...item, leaf: !item.hasChildren // 此參數(shù)用來(lái)判斷當(dāng)前節(jié)點(diǎn)是否為葉子節(jié)點(diǎn) } }) ) }) },
3.leaf的作用
當(dāng)我們使用的tree懶加載,只會(huì)加載到我們請(qǐng)求的那一層級(jí),所以當(dāng)我們?cè)谌~子節(jié)點(diǎn)請(qǐng)求時(shí),請(qǐng)求完不會(huì)出現(xiàn)數(shù)據(jù),這樣的體驗(yàn)就不是很好,這個(gè)時(shí)候就需要借助tree的props里面isLeaf的配置方法了
defaultProps: { children: 'children', label: 'spaceName', isLeaf: 'leaf' }
加上此字段,就可以清晰的看出哪些節(jié)點(diǎn)為葉子節(jié)點(diǎn)了
4.我們一旦使用懶加載的方式的話
那我們?cè)趯?duì)tree接口進(jìn)行增刪改查時(shí),及時(shí)刷新數(shù)據(jù)時(shí),就會(huì)造成我們還需要從新獲取接口
其實(shí)如果我們仔細(xì)觀察的話,我們會(huì)發(fā)現(xiàn)已經(jīng)請(qǐng)求過(guò)的節(jié)點(diǎn),我們收起,再次打開(kāi)是不會(huì)請(qǐng)求接口的,這樣的話,我們可以這么做
/** * 單獨(dú)刷新節(jié)點(diǎn) * guid: 當(dāng)前節(jié)點(diǎn)的父級(jí)唯一標(biāo)識(shí)節(jié)點(diǎn) */ refreshTreeNode(guid) { let node = this.$refs.tree.getNode(guid) if (node) { node.loaded = false node.expand() // 主動(dòng)調(diào)用展開(kāi)節(jié)點(diǎn)方法,重新查詢?cè)摴?jié)點(diǎn)下的所有子節(jié)點(diǎn) } },
Vue Element Ui 樹(shù)形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新
前言
element 樹(shù)表懶加載在每次對(duì)表格進(jìn)行修改刪除等操作后需要刷新表格數(shù)據(jù)時(shí)都需要重新請(qǐng)求,在逐增展開(kāi)加載,這樣對(duì)用戶來(lái)說(shuō)不太友好所以我們稍微解決一些
第一步:定義一個(gè)Map
用來(lái)儲(chǔ)存表格懶加載每次展開(kāi)時(shí)所點(diǎn)擊的當(dāng)前行{tree,treeNode,resolve}
data(){ return{ maps: new Map(), // 先在你的data內(nèi)搞一個(gè)map用于存儲(chǔ)接下來(lái)必要的數(shù)據(jù) } }
第二步:在load方法內(nèi)使用map
每次點(diǎn)擊展開(kāi)load方法都會(huì)返回{tree,treeNode,resolve}, 定義好map后在每一次執(zhí)行l(wèi)oad方法調(diào)用接口成功返回?cái)?shù)據(jù)后將load返回的參數(shù){tree,treeNode,resolve}儲(chǔ)存到map中去,用于后續(xù)操作中使用
load(tree, treeNode, resolve) { if (treeNode) { // 這是我的方法和接口不必照搬只需要將this.maps.set()這一句放到相應(yīng)位置即可 selectBom({ code: tree.code, ifMba: this.ifMba, }).then((res) => { if (res.code == 200) { resolve(res.data); this.maps.set(tree.code, { tree, treeNode, resolve }); // 上面這一句是將你每一次展開(kāi)的節(jié)點(diǎn)存到你剛剛在data內(nèi)定義的map內(nèi),其他的不重要 // tree.code是唯一值 } }); } },
第三步:查詢map中對(duì)應(yīng)數(shù)據(jù)
已經(jīng)將每次展開(kāi)load返回的{tree,treeNode,resolve}存儲(chǔ)到map中后,我們現(xiàn)在就需要取出來(lái)再傳給load方法了,調(diào)用refreshLoadTree方法時(shí)需要給它傳一個(gè)你所操作節(jié)點(diǎn)父節(jié)點(diǎn)ID,他會(huì)通過(guò)這個(gè)ID去map中檢索出相對(duì)應(yīng)的數(shù)據(jù)然后再調(diào)用load方法傳給它以達(dá)到局部更新的目的
refreshLoadTree(pId) { // 根據(jù)更改節(jié)點(diǎn)的父ID取出相應(yīng)數(shù)據(jù) const { tree, treeNode, resolve } = this.maps.get(pId); this.$set( // 不要忘記在你的table上寫(xiě)ref this.$refs.LoadTable.store.states.lazyTreeNodeMap, pId, [] ); if (tree) { // 將取出對(duì)應(yīng)數(shù)據(jù)再傳給load方法 this.load(tree, treeNode, resolve); } },
第四步:調(diào)用 refreshLoadTree方法
只需要在你修改或刪除等操作接口返回成功時(shí)調(diào)用并傳一個(gè)操作節(jié)點(diǎn)父ID即可實(shí)現(xiàn)局部數(shù)據(jù)更新
//最后只需要在你做修改刪除或者其他操作的地方調(diào)用即可 //括號(hào)內(nèi)傳操作節(jié)點(diǎn)的父節(jié)點(diǎn)(如果自己拿不到可以在接口成功時(shí)讓后端返回) this.refreshLoadTree(res.data.code);
這是基礎(chǔ)版本,因?yàn)楸救隧?xiàng)目原因會(huì)再次之上改動(dòng)許多并未附上全部(僅作為記錄)
到此這篇關(guān)于vue+element tree懶加載更新數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue element tree懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家何用vue和echarts實(shí)現(xiàn)一個(gè)地圖有一定的幫助,感興趣的朋友一起看看吧2024-03-03vue使用once修飾符,使事件只能觸發(fā)一次問(wèn)題
這篇文章主要介紹了vue使用once修飾符,使事件只能觸發(fā)一次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue3項(xiàng)目typescript如何export引入(imported)的interface問(wèn)題
這篇文章主要介紹了vue3項(xiàng)目typescript如何export引入(imported)的interface問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06VsCode工具開(kāi)發(fā)vue項(xiàng)目必裝插件清單(推薦!)
對(duì)于很多使用vscode編寫(xiě)vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開(kāi)發(fā)vue項(xiàng)目必裝插件的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue使用@include或@mixin報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了vue使用@include或@mixin報(bào)錯(cuò)的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue3項(xiàng)目中的el-carousel 輪播圖的使用
Carousel(走馬燈)是一種常見(jiàn)的前端組件,通常用于展示多個(gè)項(xiàng)目(通常是圖片或內(nèi)容塊)的輪播效果,這篇文章主要介紹了vue3項(xiàng)目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式
這篇文章主要介紹了vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05