Vue 3双向虚拟表格需同时控制行列可见范围，核心是二维网格裁剪与动态占位；推荐vxe-table（开箱即用）、vue-virtual-scroll-grid（定制强）或指令改造方案，须固定行列宽高、避免table布局。
Vue 3 中实现表格的**横向与纵向双向虚拟化**，本质是同时控制“行可见范围”和“列可见范围”，避免一次性渲染全部行列 DOM。这不是单纯滚动优化，而是对二维数据矩阵做动态裁剪——既要按滚动位置计算当前应显示哪几行，也要按水平位移计算当前应显示哪几列。目前主流 UI 库（如 Ant Design Vue、Element Plus）原生仅支持纵向虚拟滚动；真正开箱即用的双向虚拟表格组件极少，需组合策略或选用专有方案。
核心思路：行列双维度裁剪 + 动态占位
双向虚拟化的关键不在“多加一个方向”，而在打破传统表格“整行渲染”的惯性。必须把表格视为二维网格，每个单元格独立可控：
- 用 固定行高 × 行数 计算总高度，撑起纵向滚动条；用 固定列宽 × 列数 计算总宽度，撑起横向滚动条
- 监听容器的
scrollLeft和scrollTop，分别计算当前可视区域的startRow/endRow和startCol/endCol - 渲染时只生成
[startRow, endRow) × [startCol, endCol)范围内的<tr><td>，其余用空白占位或 CSS 隐藏 - 表头（thead）需单独处理：固定列头和固定行头要脱离普通滚动流，用
position: sticky或绝对定位+手动同步滚动偏移
可行技术路径（推荐排序）
① 使用 vxe-table（最成熟）
vxe-table 内置 virtual-scroll 模式，开启后自动启用行列双向虚拟滚动，支持百万级数据 + 上万列（实测 5w 行 × 1k 列仍流畅）。只需配置：
<vxe-table
:data="tableData"
:columns="columns"
:scroll-x="{ enabled: true, gt: 0 }"
:scroll-y="{ enabled: true, gt: 0 }"
virtual-scroll
/>
它内部通过 transform: translate() 定位单元格，配合 requestIdleCallback 做帧优化，无需手动管理行列索引。
② 基于 vue-virtual-scroll-grid 自定义
该库专为二维虚拟网格设计，暴露 rowHeight、columnWidth、rowCount、columnCount 等参数，适合需要深度定制的场景：
- 将表格数据扁平化为二维数组
gridData[rowIndex][colIndex] - 用
<VirtualGrid>包裹自定义单元格组件，传入itemKey和itemSize - 表头需额外用两个
<div>分别固定顶部行和左侧列，并监听主网格滚动事件同步偏移
③ 手写指令 + el-table / a-table 改造（轻量但需维护）
不替换组件，而是在现有表格上叠加虚拟逻辑：
- 用自定义指令监听
.el-table__body-wrapper的scroll事件，提取scrollTop和scrollLeft - 根据行高/列宽反推
startRow、endRow、startCol、endCol - 对
:data和:columns分别做切片：data.slice(startRow, endRow)+columns.slice(startCol, endCol) - 注意：需禁用原生表格的
fit和自动列宽计算，列宽设为固定值
必须绕开的坑
双向虚拟化对 DOM 结构和样式约束极强：
立即学习“前端免费学习笔记（深入）”；
- 行高/列宽必须固定：动态高度会破坏滚动距离与行号的线性映射，导致错位或白屏；若必须不定高，需预存每行高度并构建高度索引数组（复杂度陡增）
-
不能依赖 CSS 表格布局（display: table）：浏览器对虚拟化表格的
table-layout: fixed兼容性差，建议用div + flex/grid实现单元格网格 -
固定列/表头需独立滚动容器：主表格滚动时，左固定列和顶固定行必须用不同容器承载，并用
transform: translate()同步偏移，否则会出现撕裂 - 不要在虚拟单元格内放复杂组件：如嵌套子表格、图表、大量 watch，会显著拖慢重绘速度；建议只放纯文本或简单 icon
双向虚拟表格不是“高级功能”，而是大数据量下移动端和桌面端的刚需。vxe-table 是目前最省心的选择；若追求极致轻量或需对接特定设计系统，基于 vue-virtual-scroll-grid 二次封装更可控。手写方案适合已有项目渐进改造，但长期看维护成本高于引入专业库。
