千条表格数据不分页能勾选的解决思路

大家好，这里是小吴。解决这个下面问题花了不少功夫，记录下来作为2021序章。

使用elementUI表格组件开发的一个模块，

• 接近两千多条数据 要求不分页；
• 可同时选中这些数据进行操作； 东西作出来，好家伙，卡爆了。页面渲染出来大概半分钟。

OK,这个需求不对劲，谢谢，有被难到。下面介绍问题解决的逻辑。下篇介绍具体方法。

方案思路

效果如Banner，监听用户的滑动，自己用JS写分页（一屏两页），只展示固定条数的数据。

• 监听滑动
  • 顶部（scrollTop=0）：
    页码-1，前放入一页数据（[3,4]->[2,3]]）
  • 底部（scrollHeight-scrollTop-clientHeight=0)：
    页码-1，后放入一页数据（[3,4]->[4,5]]）
• 多选数据处理
  数组中有个属性，(全选/选中至true)新页根据这个属性显示勾选状态。

在监听滑动操作数组后应注意改变滑块的位置，保证用户看到的数据是连贯的无跳跃感。同时也避免scrollTop持续为0和scrollHeight-scrollTop-clientHeight怎么都不为0（这都是血泪坑）

其他

为啥不用无限滚动组件

无限滚动的数据条数会随用户下滑增加，无法达到减少页面DOM的目的，其次多选状态的控制有难度。