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

<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存起來
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起來
        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 = []; //把存起來的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)文章

vue?filters和directives訪問this的問題詳解
這篇文章主要介紹了vue?filters和directives訪問this的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
一篇文章帶你吃透Vue生命周期(結(jié)合案例通俗易懂)
這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vue生命周期，文章通過結(jié)合案例更加的通俗易懂,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
Vue結(jié)合openlayers按照經(jīng)緯度坐標(biāo)實(shí)現(xiàn)錨地標(biāo)記及繪制多邊形區(qū)域
OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制
2022-09-09
Vue?webpack的基本使用示例教程
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
Vue3環(huán)境安裝以及項(xiàng)目搭建全過程
Vue工程化項(xiàng)目環(huán)境配置還是比較麻煩的,下面這篇文章主要給大家介紹了關(guān)于Vue3環(huán)境安裝以及項(xiàng)目搭建的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue中的文本空格占位符說明
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue 實(shí)現(xiàn)購(gòu)物車總價(jià)計(jì)算
今天小編就為大家分享一篇vue 實(shí)現(xiàn)購(gòu)物車總價(jià)計(jì)算，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實(shí)例代碼通過兩種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
VUE 動(dòng)態(tài)組件的應(yīng)用案例分析
這篇文章主要介紹了VUE 動(dòng)態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動(dòng)態(tài)組件的應(yīng)用場(chǎng)景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06