由於tree的數據量大,一次返回的數據量會很慢,所以採用了懶加載lazy來實現。
在實現el-tree 的懶加載時,從數據已知是否選中狀態以及半選節點list。
由於tree數據是點擊一級加載一級,會存在用戶修改複選框狀態後,再去加載子集數據的情況,這需要以父節點的選中狀態爲準:
1. 父節點選中,所有子節點選中
2. 父節點不選,所有子節點不選
3. 父節點半選,子節點選中狀態不變,以數據爲準
所以問題來了,如何判斷當前級父節點的半選狀態?
可以這麼實現,處理級數據時,同時設置各個節點的半選狀態,這樣處理下一級數據時可以通過父節點是否半選和節點狀態來設置當前節點選中。
半選list 最好存在vuex裏,實時去存儲當前tree的半選list。
補充一下實現的代碼:
----------------------------------------------------------------------------------------------------------------------------------------------------------------
坑:tree的連續勾選前兩個節點,父節點被選中的問題。
出現的原因: 由於el-tree子節點尚未完全加載(只加載出來前幾個),默認勾選已經開始(已加載出來的子節點被默認勾選),這時el-tree會認爲子節點全部勾選,所以父節點也被勾選,這就導致所有子節點都被勾選。
解決方案: setTimeout ,同步代碼執行完畢,子節點完全加載後,去處理級數據。
- end -