场景:工作中有时候会遇到两种情景。两个场景在大量数据出现的时,不做性能处理会因dom节点加载过多而造成卡顿。
1、不需要分页,只要单页展示的表格需求。
2、后台就是没有分页,全部数据直接接口返回。
处理办法:处理这两个常常用到的办法有两个方案。目的通过减少dom的加载数量而达到不卡顿。
1、虚拟列表。
2、前端分页。
思路:这里主要讲的是虚拟table的开发思路,这个是使用 ant-design 的 a-table, a-list 来开发。核心思想是,a-table 用一个固定的数据作为基础,这个a-table的固定数据用作数据加载时候的动态高度设置,并展示列头和滚动条;a-list 作为动态数据展示并且同时随着滚动条的变化位置也在变化的。
查考文档:
虚拟列表:https://juejin.cn/post/6844903982742110216