业务场景
目前项目有个粘贴名单的需求,就是粘贴大量人员名单解析后一次性渲染到表格里,不经过处理目前超过40条表格数据页面会变得卡顿,不流畅,达到60条数据输入框输入异常卡顿,很没有体验,连开发都觉得没体验,更别提用户了
原因和解决方案
原因其实很简单,就是一次性渲染数据太多,占用了太高的浏览器性能资源,导致。
故有虚拟滚动的方案,类似于长列表的懒加载(分片加载),即先渲染一部分数据,例如10条再让用户滚动一定位置来渲染与滚动长度相匹配的数据
成熟的解决方案
成熟的解决方案即比较成熟的库,当然实现方案也不难,后面会介绍实现逻辑
vxe-table
vxe-table
文档:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api
演示:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll
详细使用方法: