Ant-Design-Vue@1 table实现虚拟滚动

a-virtual-table

基于Ant-Design-Vue的 Table 组件开发的虚拟滚动组件，支持动态高度，解决数据量大时滚动卡顿的问题。

demo & 源码：https://xiaocheng555.github.i...

组件

用法

a-virtual-table 组件

Props

参数	说明	类型	可选值	默认值
dataSource	总数据	Array	必填
keyProp	key值，data数据中的唯一id【⚠️若keyProp未设置或keyProp值不唯一，可能导致表格空数据或者滚动时渲染的数据断层、不连贯】	string	—	id
itemSize	每一行的预估高度	number	—	60
scrollBox	指定滚动容器；在指定滚动容器时，如果表格设置了height高度，则滚动容器为表格内的滚动容器；如果表格为设置height高度，则自动获取父层以外的滚动容器，直至window容器为止	string	—	-
buffer	顶部和底部缓冲区域，值越大显示表格的行数越多	Number	—	200
throttleTime	滚动事件的节流时间	number	—	10
dynamic	动态获取表格行高度，默认开启。设置为false时，则以itemSize为表格行的真实高度，能大大减少虚拟滚动计算量，减少滚动白屏；如果itemSize与表格行的真实高度不一致，可能导致滚动时表格数据错乱	boolean	—	true
virtualized	是否开启虚拟滚动	boolean	—	true
*	支持 组件的props属性，更多请看 api	-	—	-

Methods

方法名	说明	参数
scrollTo	滚动到第几行【不太精确：因为滚动到第n行时，如果周围的表格行计算出真实高度后会更新高度，导致当前行坍塌或撑起】	index
update	更新	-
clearSelection	用于多选 ，清空用户的选择	-
toggleRowSelection	用于多选 , 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected

Events

事件名称	说明	参数
change	计算完成真实显示的表格行数	(renderData, start, end)：renderData 真实渲染的数据，start和end指的是渲染的数据在总数据的开始到结束的区间范围
selection-change	虚拟表格多选选项发生更改时触发事件	selectedRows