天天看點

antv表格大量資料卡頓問題(局部渲染資料)

  表格最大資料量也就500左右,再多,dom太多,浏覽器會卡頓。為了解決這個問題,同時保持表格原有功能,對資料做了優化。

  特點:

  1、保留原有antv的table的所有功能(antd-react 一樣的道理,這裡隻貼vue代碼,react抄一下函數即可)

  2、資料切換流暢,無卡頓問題,頭尾資料無空白問題

  3、可視區域渲染資料,條數預設15條,可配置,注意和可視高度配合

  4、寫法很簡單

 思路: 預設每條資料高度一樣,不換行。增加一個滾動條,滾動滾動條,根據百分比,計算要展示的資料

 缺點:全選會觸發2次資料的回調,這個暫時沒處理;若表格換行,高度相差太大影響資料顯示,需要配置合理的高度

 貼一下代碼,有需要的自己拷貝:  ps:對分頁的一些功能還沒封裝完,直接忽略,看核心部分即可