大数据渲染table
# 极大数量下保证不卡
https://github.com/mleibman/SlickGrid (opens new window)
# 50W 行数据依旧不卡
https://6pac.github.io/SlickGrid/examples/example-optimizing-dataview.html (opens new window)
https://jsfiddle.net/fx6018vu/ (opens new window)
(非原创，来自https://segmentfault.com/q/1010000017202682/a-1020000018142273 (opens new window) 无法配合 checkbox 使用，不过还是感谢那位大神提供了思路)
https://www.npmjs.com/package/vue-element-bigdata-table (opens new window)
# 原理解释
https://juejin.cn/post/6844903593284206605 (opens new window)
在 Vue 实例中添加的对象，Vue 会先遍历一遍对象的所有属性，用 Object.defineProperty()为每个对象创建对应的 getter 和 setter。而在项目中，我们的 insideTableData 只是一个数据集对象中的一个属性，这个对象还包括很多与这一个数据集相关的信息，我们在使用 this.insideTableData.slice 获取数据的时候会触发 this.insideTableData 对应的 getter，从而执行一些其他逻辑，而我们的滚动又会频繁的（仅当 currentIndex 变化的时候）需要重新填充表格数据，所以这会造成卡顿。
解决这个问题的办法就是阻止 Vue 给我们的数据集对象设置对应的 setter 和 getter，我的方法就是使用 ES5 的 Object.preventExtensions 在将数据集对象交给 Vue 实例代理前将对象密封，这样数据集对象就变成了不可拓展的了，Vue 就不会再添加新的属性了，也就无法设置 setter 和 getter 了。
做了这个处理后渲染几十万数据跟玩儿似的流畅。但是阻止 Vue 设置 getter 和 setter 也造成了一些问题，比如原来表格组件中的一些依赖于表格数据的计算属性，现在无法在表格数据变化时重新计算，当然了，影响不大，就一个表格行数的计算，所以改成了手动设置这个值。
请使用 vxe-table ，它更强大而且性能更好(使用了虚拟滚动技术来解决大数据量的问题)。而且它的接口和 el-table 很相似，代码迁移过去也很轻松。