el-tree數據量過大,造成瀏覽器卡死、崩潰
場景:樹形結構展示,數據超級多,超過萬條,每次打開都會崩潰
我這里采用的是引入新的插件虛擬樹,它是參照element-plus 中TreeV2改造vue2.x版本虛擬化樹形控件,不論你的數據量多大,虛擬樹都能毫無壓力地處理。
虛擬樹傳送門:https://sangtian152.github.io/virtual-tree/zh/demo/#attributes
前面下載引入這里就不多贅述了,都一樣的。
具體代碼如下:
<vl-treeref='tree'class='filter-tree':props='defaultProps':data='dataList':height='430'show-checkbox:expand-on-click-node='false':default-checked-keys='defaultChecked':default-expanded-keys='defalutExpanded':filter-methods='filterMethod'></vl-tree>
別的都和el-tree差不多,不會用的可以點傳送門去看看,里面屬性方法都有的。
但是用這個還有一個問題就是,當數據量過大且都選中的時候,回顯的時候會超級超級慢,而且還會崩潰,但是這個時候是由于回顯的數據過多引起的。嘗試了好多方法都不行,分時函數都用上了,雖然不崩潰了,但是超級慢。
后來的解決辦法是:
回顯的時候,調用后端接口,讓后端只返回選中的父節點,讓它自動關聯選中子節點,暫時解決了這個問題。