Vue - 表格的虚拟滚动答案

【问题标题】：Vue - virtual scroll for tableVue - 表格的虚拟滚动
【发布时间】：2023-01-23 03:21:14
【问题描述】：

我希望你能向我推荐一个可以利用 Vue 中表格的虚拟滚动/回收器滚动的包。

我试过这两个库：

我能够生成一个虚拟的项目滚动列表，但我想为表格实现这种行为。

我的表是一个 Vuetify Simpletable，它有一个 <thead> 和一个 <tbody> 组件

【问题讨论】：

为什么 vue-virtual-scroller 不适合你？请参阅本教程digitalocean.com/community/tutorials/vuejs-vue-virtual-scroller。如果根据组件的设置方式它不起作用，也许您需要一个不同的表组件。
您也可以尝试使用纯js 虚拟滚动引擎github.com/dhilt/vscroll。它与 Vue 集成的示例在这里：stackblitz.com/edit/vscroll-vue-integration?file=App.vue——只需将 div 替换为表格内容

标签： vue.js html-table virtualscroll

【解决方案1】：

我查看了 Vue 3 的 2 个虚拟表。Element Plus 有一个目前处于测试阶段。我敦促谨慎使用它，因为我在测试它时收到事件错误并且它仍处于测试阶段。 https://element-plus.org/en-US/component/table-v2.html

我最终选择了 Ag-grid 数据表。它很受欢迎，性能也很棒。我将 5k 行复杂数据加载到其中，并使用具有在毫秒内更新的计算值的过滤器。我使用的是免费社区版。如果您需要支持，也有付费商业版。 https://www.ag-grid.com/vue-data-grid/getting-started/

【讨论】：