Element UI 懶載入樹全選 子項動態更新

2021-10-10 16:58:31 字數 1872 閱讀 3431

有三類資料,切換型別時原有選中資訊不清空

使用樹形控制項 el-tree, 資料採用懶載入,動態獲取;支援全選

層級最多**,最少一級;選中資料只取葉子節點

需求拆解一下,主要的解決步驟為:

確定全選的實現方案

網上提到的較多的是 單獨寫個多選框,但不是懶載入的樹

嘗試過後,筆者選擇了 將全選框作為根節點,預設展開一層 的辦法 (感謝峰哥提點!

// 部分相關**

loadnode

(node, require)

]require

(this

.rootnode)

}// 一級節點

if(node.level ===1)

...}

切換型別後,更新樹中的節點資料參考文章

儲存初始節點,刪除原有子節點,再根據新資料建立子項

選中某節點,動態獲取資料,展開,選中子節點參考文章

手動觸發loaddata, 設定當前節點的選中狀態(父選中,即子選中),將節點key放入defaultexpandedkeys

// 部分相關**

loadnode

(node, require))}

}}

確定如何取葉子節點有兩種思路,一種是存所有選中節點,再處理;一種是一邊存,一邊刪非葉子節點

筆者遇到的情況,節點不好根據層級或其他值直接處理,故選擇第二種方式

儲存不同型別的選中資訊,切換後選中展開樣式不變

選中展開,故需要設定defaultexpandedkeys,defaultcheckedkeys為對應的值,結合此處的需求,最後defaultexpandedkeys需變為選中節點的父節點們,defaultcheckedkeys需為選中節點的葉子節點們

// 部分相關**

watch:

)this

.init()

}}

loaddata只有在當前節點未載入資料時使用才有用,否則用了也白搭

故此時,可先獲取當前的node, 判斷其childnodes是否已有資料,再做下一步操作

該點要深深地記住,loaddata不僅在沒選中展開時會用到,在選中展開時也會用到,在切換型別時還會用到 orz

如為多層級(3及以上),在處理取消選中時,不止要處理節點本身,節點的子節點,還要處理節點的孫子,曾孫子.

儲存初始節點,替換資料時,初始節點可以選根節點,也可以選全選節點。根據實踐,如選全選的節點,再重新整理子項資料時,要清除初始節點的選中狀態,其子項為部分選中時,節點的選中狀態暫時沒找到解決辦法清除。故選擇手動重新整理兩次資料,先將全選節點放入根節點下,再將更新資料放入全選節點下

element ui 懶載入樹節點內子項的動態更新

el-tree動態載入子級( 結合checkbox)

今天也是站在前人肩膀上的虎鯨!收工快樂 :)

element ui樹結構懶載入

在實際專案中,往往樹結構資料量較大,這時樹節點必須懶載入 element ui樹的懶載入 js 如下 defaultprops 樹節點形式為 getorglist方法如下 懶載入樹獲取組織機構子節點 element tree使用方法 param node 當前點選節點資訊 param resolve...

mysql懶載入 mybatis懶載入

1.概念 懶載入就是按需載入,我們需要什麼的時候再去進行什麼操作。而且先從單錶查詢,需要時再從關聯表去關聯查詢,能很大提高資料庫效能,因為查詢單錶要比關聯查詢多張表速度要快。在mybatis中,resultmap可以實現高階對映 使用association collection實現一對一及一對多對映...

路由懶載入與元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...