el-table大數據量渲染卡頓的一種思路

背景

現需要呈現一個表格，有近500行，30多列，使用vue+elementUI呈現。
這個數據量不算大，但可能列數比較多，渲染時速度很慢，滾動會有卡頓，使用體驗不佳。
但並不想做分頁處理，想要儘可能接近excel的呈現。

參考

網上尋找一番，參考了一些意見：
VUE,ElementUI列表大數據卡頓問題？（已解決）
element-ui table 表格 大數據展示解決方案 支付萬級數據展示

思路

假設全部數據爲allData(數組)，現在使用一個displayData（數組），displayData = allData.slice(scorll, scorll+ displayCount)，scroll表示當前滾動到的index， displayCount表示要展示的行數。把displayData設爲el-table的數據源，只渲染該部分數據。通過對錶格添加滾動事件監聽，來動態更新scroll，並且對scroll添加watch，當scroll發生變化，就自動更新displayData。

滾動監聽

監聽滾動需要考慮到兼容性,火狐是DOMMouseScroll，其他的是mousewheel。

			/*指定table的ref*/
            this.table = this.$refs.mytable.bodyWrapper;
			
			/*瀏覽器兼容*/
            let userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
            let ff = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器          
            if (ff) {
             this.table.addEventListener('DOMMouseScroll', (event) => {
                    let detail = event.detail;
                    //滾動方向
                    let down = detail > 0;
                    /**
                    根據滾動方向和距離修改scroll的值，需要注意scroll的範圍不能越界。
                    **/
                    });
            }else{
              this.table.addEventListener('mousewheel', (event) => {
                    let wheel = event.deltaY;
                    //滾動方向
                    let down = wheel > 0;
                    });
            }

slider

除了滾動表格，還需要一個模擬滾動條。這裏選用slider控件，和scroll綁定。
發現elementUI的slider數值方向只能從下到上，且不能有太多的定製化。找到另外一個可深度定製化的vue slider控件：vue-slider-component。通過參數配置及css修改使其儘可能像滾動條。