背景
1.現需要呈現一個表格，有近500行，30多列，使用vue+elementUI呈現。
這個數據量不算大，但可能列數比較多，渲染時速度很慢，滾動會有卡頓，使用體驗不佳。
但並不想做分頁處理，想要盡可能接近excel的呈現。
2.做了分頁處理每頁也有200行數據30多列 滾動會有卡頓、多選、單選會有延遲
3.前端UI框架使用的是ElementUI,項目要求數據不分頁一個表格至少要1000條數據，這時點擊其他DOM操作，會出現卡頓的現象。如點擊復選框。
如何解決
這個時候常常有兩種方法處理，
1、做分頁，保證每頁的數據渲染量很小，這樣在列數很多的情況下也可以有良好的體驗
2、如果我不想分頁，又想在一頁顯示全部數據呢？這個時候其實就可以用數據懶加載了
根據項目需求，這需要一頁可以看到全部數據，所以我選擇了第二種方式
那么第二種方式要怎么去實現呢？
在了解它的原理前，你需要分清楚三個屬性：
scrollHeight：指元素的總高度，包含滾動條中的內容。只讀屬性。不帶px單位。就是下圖中，54條數據的高度，但是因為有滾動條，所以屏幕看不到這么高
scrollTop：當元素出現滾動條時，向下拖動滾動條，內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條，則scrollTop的值為0，該值只能是正值。
clientHeight：元素客戶區的大小，指的是元素內容及其邊框所占據的空間大小，實際上就是可視區域的大小。
那如何判斷滾動條滾到底部了呢？
scrollHeight-scrollTop-clientHeight=0，這個時候可以就是滾動條滾到底部的時候了