element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案

更新時(shí)間：2022年08月18日 08:37:36 作者：｀l(xiāng) l l s j 。

本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

當(dāng)tree 懶加載獲取信息時(shí),只有在第一次加載時(shí),觸發(fā) :load=“loadNode” ,但是這樣明顯是不合理的,因?yàn)楫?dāng)增刪改查,后端數(shù)據(jù)已經(jīng)改變,但是咱們的:load=“loadNode” 不會(huì)再次觸發(fā),導(dǎo)致數(shù)據(jù)顯示問(wèn)題;

<el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick"></el-tree>

data() {
    return {
          node_had: [], // 觸發(fā) tree 的 :load=loadNode 重復(fù)觸發(fā)  動(dòng)態(tài)更新tree
          resolve_had: [], // 觸發(fā) tree 的 :load=loadNode 重復(fù)觸發(fā)  動(dòng)態(tài)更新tree
      },
},

methods:{
   // 異步樹葉子節(jié)點(diǎn)懶加載邏輯
    loadNode(node, resolve) {
      // console.log(node, resolve)
      // 一級(jí)節(jié)點(diǎn)處理
      if (node.level === 0) {
        this.node_had = node; //這里是關(guān)鍵！在data里面定義一個(gè)變量，將node.level == 0的node存起來(lái)
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起來(lái)
        this.requestTree(resolve);
      }
      // 其余節(jié)點(diǎn)處理
      if (node.level >= 1) {
        // 注意！把resolve傳到你自己的異步中去
        this.getIndex(node, resolve);
      }
    },
    // 觸發(fā) tree 的 :load=loadNode 重復(fù)觸發(fā)  動(dòng)態(tài)更新tree
    requestNewData() {
      this.node_had.childNodes = []; //把存起來(lái)的node的子節(jié)點(diǎn)清空，不然會(huì)界面會(huì)出現(xiàn)重復(fù)樹！
      this.loadNode(this.node_had, this.resolve_had); //再次執(zhí)行懶加載的方法
    },
    // 點(diǎn)擊 按鈕時(shí) 顯示tree 時(shí)候 觸發(fā) 函數(shù) 重新渲染tree
    _handleCopy(_tableSelection) {
      this.requestNewData(this.node_had, this.resolve_had);
    }
}

到此這篇關(guān)于element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案的文章就介紹到這了,更多相關(guān)element tree懶加載:load="loadNode"內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于Vue3使用axios的配置教程詳解
道axios是一個(gè)庫(kù),并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關(guān)于Vue3使用axios的配置教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí)總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-12-12
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告
這篇文章主要為大家詳細(xì)介紹了vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
詳細(xì)聊聊Vue中的MVVM模式原理
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用問(wèn)題
這篇文章主要介紹了Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展，地圖熱點(diǎn)展示越來(lái)越受到人們的關(guān)注，在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互，包括熱力圖、點(diǎn)聚合等
2023-07-07
使用Vue與Firebase構(gòu)建實(shí)時(shí)聊天應(yīng)用的示例代碼
隨著互聯(lián)網(wǎng)通訊技術(shù)的不斷進(jìn)步,實(shí)時(shí)聊天應(yīng)用現(xiàn)在已成為我們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?無(wú)論是社交媒體平臺(tái)、工作溝通工具還是客戶支持系統(tǒng),實(shí)時(shí)聊天都在不斷被需求,今天,我們將介紹如何使用Vue.js與Firebase來(lái)構(gòu)建一個(gè)簡(jiǎn)單而強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下
2024-11-11
Vue2+element-ui實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue2+element-ui使用面包屑導(dǎo)航的正確姿勢(shì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04