背景
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，这个时候可以就是滚动条滚到底部的时候了