有三類資料,切換型別時原有選中資訊不清空
使用樹形控制項 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...