vxe-table vue 支持最完美的虛擬滾動組件:虛擬列表、虛擬樹、橫向與縱向虛擬滾動的組件

vxe-table vue 支持最完美的虛擬滾動組件:虛擬列表、虛擬樹、橫向與縱向虛擬滾動的表格組件

目前主流的數據驅動框架 react、vue …等雖然入門相當簡單,但是其性能就比原生的 js 組件得太多了;
例如 vue 中,由於數據雙向的原因,需要對數據進行雙向監聽,從而使渲染性能大幅下降,如果數據量稍微大一點,頁面基本上是直接卡死,那麼如何解決呢?虛擬組件由此誕生,只渲染當前可視區的內容,其餘的收起,當滾動到指定位置時才渲染對應的節點,即時 vue 的雙向綁定會損耗性能,由於 dom 節點的大幅減少,也不會對性能造成影響,從而流暢加載。

注:(開啓虛擬滾動的前提,每一行的高度必須固定)

虛擬列表

可以將項目中任意的列表渲染成虛擬滾動,從而支持大數據量加載,例如實現下拉框虛擬列表、海量數據列表…等等,對性能的提升飛一般高效
在這裏插入圖片描述

縱向虛擬表格

表格開啓虛擬滾動,對於一次性加載 10w 條數據不是夢在這裏插入圖片描述

橫向與縱向虛擬表格

對於某些特殊的場景,比如產品經理說要把一個表格的列非常多的表格全部加載出來,比如 1w 列頭、5w 條數據,對於這種需求如果砍不死產品經理的話,就可以試試同時開啓橫向和縱向虛擬滾動,只會渲染可視區的 tr、td 節點,也能輕鬆應對
在這裏插入圖片描述

縱向虛擬樹表格

除了列表之外,那麼最複雜的就是樹結構了,當一顆樹節點非常多的時候,如果都渲染出來,由於是樹結構,那麼遞歸的損耗比列表大太多了。別急,好在虛擬樹也是支持的,以下渲染 5w 條樹節點,依然相當流暢,不過樹由於其結構本身就非常複雜,所以一般如果不超過 10w 條還是很流暢的

樹的虛擬滾動需要藉助一個插件 vxe-table-plugin-virtual-tree
在這裏插入圖片描述

橫向與縱向虛擬樹表格

又到了砍死產品經理的時候了,TM 誰再提這種需求就砍誰。除了以上樹的虛擬滾動,如果還要更變態一點,比如要支持 5k 列 3w 行樹節點,別急,準備好磚頭,還是可以支持的,但是由於目前的數據結構已經到了極限了(涉及 js 運行效率、數據雙向的損耗…等),所以如果數據量太大的話可能就沒那麼流暢了,數據量不超過 5w 節點話還是沒問題的
在這裏插入圖片描述
到這裏就結束了哈,不貼代碼、不發地址,一切隨緣,有需要的人自然可以找到,找不到的說明不需要!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章