用途:在 Vue 项目中把 TanStack Table 的最终行模型或可见列模型交给 TanStack Virtual 虚拟化,用于渲染大量行或列。它建立在 @tanstack/table-core 的核心、入门与表格状态之上,虚拟化消费的是最终 Table 模型,不注册在 tableFeatures 中。
主要能力:通过 useVirtualizer 配合 computed 选项,让 count、滚动目标随 Vue 当前模型更新;行来自 table.getRowModel().rows,列来自 table.getVisibleLeafColumns();支持稳定键、估算尺寸、overscan、总尺寸计算,以及网格/弹性布局下的动态行高与粘性表头。
使用方式:引入 @tanstack/vue-virtual 的 useVirtualizer,用 computed 包裹选项对象,例如 count 取行数、getScrollElement 返回滚动容器、estimateSize 返回估算高度、getItemKey 返回行 id、overscan 设置预渲染数量;再用 getVirtualItems() 与 getTotalSize() 渲染。滚动容器需有受限高度和定位上下文,用总尺寸创建占位元素,并对虚拟项做位移与测量。
适用场景:需要展示大量行或列、动态行高、粘性表头,或与无限滚动配合的 Vue 表格。无限获取时,仅在 totalFetched 小于服务端行数且无进行中请求时,靠近最后一个虚拟项触发请求;手动排序时服务端需返回排序后的顺序,排序变化通常重置分页。
限制:Virtual 只提供测量,不提供占位布局、位移、粘性定位或表格列宽,这些需自行实现;不要把普通选项快照传给 useVirtualizer,应使用 computed;不要虚拟化源数组,应虚拟化 Table 的当前模型。具体 API 可查看已安装的 @tanstack/vue-table/dist/ 与 @tanstack/vue-virtual/dist/,并参考维护中的 Vue 示例。