使用Virtualize组件渲染表格时如何正确设置动态rowspan属性

问题场景 #

在使用Virtualize虚拟滚动组件渲染表格时，给单元格设置动态rowspan跨行属性会出现布局错乱：虚拟滚动默认仅渲染当前视口内的行片段，如果某段跨行合并的起始行不在当前渲染的视口范围内，对应带rowspan属性的单元格不会被渲染，就会导致后续单元格列错位。
当前基础实现代码如下：

<table>
  <thead>...</thead>
  <tbody>
    <Virtualize Items="@Models" Context="model">
      <tr>
         <th rowspan="??">多行共用标签<th>
         <td>行数据单元格</td>
         <td>行数据单元格</td>
         <!-- 其余单元格 -->
         <td>行数据单元格</td>
      </tr>
    </Virtualize>
  </tbody>
  <tfoot>...</tfoot>
</table>

代码中标记??的rowspan为动态非常量值，核心需要拿到Virtualize组件当前渲染的列表片段范围，才能正确计算跨行逻辑。
正常状态下跨行单元格会完整覆盖对应行数，当虚拟滚动仅渲染合并区间内的非起始行时（例如合并区间为1-7行，当前视口仅渲染2-7行），就会因为缺失起始行的跨行标签出现表格布局错乱。

可行解决方案 #

• 利用ItemsProvider追踪当前渲染范围
  不要直接给Virtualize绑定全量Items集合，改用ItemsProvider委托做数据加载：委托入参的ItemsProviderRequest对象会携带当前渲染请求的起始索引StartIndex和需要渲染的条目数Count，直接记录这两个值就能得到当前视口渲染的行区间为[StartIndex, StartIndex + Count)。
  拿到渲染区间后预处理数据源，遍历所有跨行分组做适配：
  • 若跨行分组的起始行落在当前渲染区间内，正常渲染对应的<th>单元格，rowspan值取「分组总行数」和「当前渲染区间内属于该分组的行数」的较小值，避免跨行数超出实际渲染的行数量
  • 若跨行分组的起始行不在当前渲染区间，但分组覆盖了当前渲染的部分行，当前区间内属于该分组的所有行都不要渲染对应的<th>单元格，避免单元格列错位
• 布局层绕开原生表格rowspan限制
  如果跨行逻辑复杂、分组边界多，可以放弃原生table的rowspan合并能力，改用div+CSS模拟表格布局，把跨行的标签做成独立的绝对定位元素，根据当前滚动位置动态计算它的高度和纵向偏移，完全不依赖表格原生合并规则，从根源上避免虚拟滚动缺行导致的结构问题。

不推荐为每次渲染的视口片段单独拼接自定义表格结构的实现方式，虚拟滚动触发频率高，频繁做DOM结构拼接计算会大幅降低滚动流畅度，性能开销远高于上述两种方案。

内容的提问来源于stack exchange，提问作者pilotnik