Vue或React的虚拟列表

发布网友发布时间：2023-01-17 12:38

共1个回答

热心网友时间：2023-07-15 06:38

一直都用antd做工具开发，最近在开发过程中遇到了一个问题，就是表格组件，当数据行数达到1w+的时候，表格渲染就特别卡，加载也特别慢，这个时候就需要虚拟列表来解决。

虚拟列表，antd有现成的，不过antd是基于react的，vue版本没有虚拟表格，网上也有些基于vue的大数据表格，但都不是非常满意，所以准备自己写一个。

我们有成千上百条数据，但是列表渲染的数据条目是有限的，大部分是不需要显示的。这个时候如果渲染的数据是动态生成的，滚动的时候，看不到的数据会重新渲染成新的数据，那只需要列表里的数量就足够了，没必要渲染那么多节点。

列表条目的创建
第一行插入一个占位div，假设第一个在显示视图里的条目索引为i,那么0-i的高度总和就是div的高度。
计算视图可以渲染的数量为n,最后最后一行再增加一个占位div,i + n后的高度总和设为这个div的高度。

为了实现表格头冻结，我在虚拟列表做了滚动条的隐藏，自己实现滚动条，其实真正实现的时候，滚动条应该分离出这个组件。