vue一次性渲染大量表格数据的解决方案(vxe-table)

业务场景

目前项目有个粘贴名单的需求，就是粘贴大量人员名单解析后一次性渲染到表格里，不经过处理目前超过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

详细使用方法：

Vue 渲染

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。