支持千万数据的多行多列Vue3虚拟列表

网上的虚拟列表支持单行多列（横向滚动列表）和单列多行（纵向滚动列表），npm也有虚拟列表和虚拟网格。例如：vue-virtual-scroll-list、vue-virtual-scroll-grid。使用起来不太方便，而且不支持插槽。

这个是虚拟列表的实现，多行多列虚拟列表在这个基础上扩展，使用行和列来代表数据下标，通过计算开始位置和结束位置，动态截取可见区域元素。

由于CSS可设置的最大长度的限制，在谷歌浏览器最大能设置33554428px。普通的虚拟列表最多只能支持10几万条数据。为了支持上千万条数据，需要固定padding的最大值，我这里只取最大长度的一半，剩下的留给宽度、高度。之后引入偏移位置，当滚动到列表边界时，计算需要偏移的位置和scrollTop、scrollLeft，让滚动条可以重新滚动。即使加载上千万数据，只要浏览器的内存足够，是可以正常滚动的。

npm install @xuemiyang/vue-virtual-list

效果图