element tree懶加載:load="loadNode"隻觸發一次的解決方案
當tree 懶加載獲取 信息時,隻有在第一次 加載時,觸發 :load=“loadNode” ,但是這樣明顯是不合理的,因為當增刪改查,後端數據已經改變,但是咱們的:load=“loadNode” 不會再次觸發,導致數據顯示問題;
<el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick"></el-tree>
data() { return { node_had: [], // 觸發 tree 的 :load=loadNode 重復觸發 動態更新tree resolve_had: [], // 觸發 tree 的 :load=loadNode 重復觸發 動態更新tree }, },
methods:{ // 異步樹葉子節點懶加載邏輯 loadNode(node, resolve) { // console.log(node, resolve) // 一級節點處理 if (node.level === 0) { this.node_had = node; //這裡是關鍵!在data裡面定義一個變量,將node.level == 0的node存起來 this.resolve_had = resolve; //同上,把node.level == 0的resolve也存起來 this.requestTree(resolve); } // 其餘節點處理 if (node.level >= 1) { // 註意!把resolve傳到你自己的異步中去 this.getIndex(node, resolve); } }, // 觸發 tree 的 :load=loadNode 重復觸發 動態更新tree requestNewData() { this.node_had.childNodes = []; //把存起來的node的子節點清空,不然會界面會出現重復樹! this.loadNode(this.node_had, this.resolve_had); //再次執行懶加載的方法 }, // 點擊 按鈕時 顯示tree 時候 觸發 函數 重新渲染tree _handleCopy(_tableSelection) { this.requestNewData(this.node_had, this.resolve_had); } }
到此這篇關於element tree懶加載:load="loadNode"隻觸發一次的解決方案的文章就介紹到這瞭,更多相關element tree懶加載:load="loadNode"內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- elementui中使用el-tree控件懶加載和局部刷新
- el-tree loadNode懶加載的實現
- vue中的el-tree @node-click傳自定義參數
- element-ui tree 手動展開功能實現(異步樹也可以)
- element-ui tree 異步樹實現勾選自動展開、指定展開、指定勾選功能