基于可用空间的Dynamic table分页无内部滚动实现方案咨询

1. 布局与高度计算逻辑（从根源避免误差） #

• 页面布局采用Flex分层，将表格以外的元素（导航栏、筛选区、分页器等）全部设为固定高度的非伸缩项，表格外层容器设为flex: 1 1 auto，同时给容器加overflow: hidden，绝对不要给表格本体加overflow属性，从样式层面禁止内部滚动。
• 放弃window.resize事件监听，改用ResizeObserver监听表格外层容器的尺寸变化，触发时机和布局更新完全同步，不会出现滞后计算的误差。
• 不要硬编码表格行高计算单页数量：首次渲染时先渲染1行隐藏的基准行获取真实的offsetHeight，或者第一页数据渲染完成后缓存当前行高，单页行数计算公式为 可展示行数 = Math.floor((容器总高度 - 表头固定高度) / 单行高度)，同时添加最小/最大值兜底（比如最少5行、最多50行），避免极端缩放时请求参数异常。

2. 请求逻辑适配Keyset分页（解决时序问题） #

• 给高度变化触发的请求加200ms防抖，避免缩放过程中连续触发无效请求，也等布局完全稳定后再取最终计算的单页行数。
• 所有请求通过AbortController做中断处理，每次发起新请求时直接终止上一个未完成的请求，彻底避免旧请求后返回导致的数据覆盖问题，参考实现：

let requestController = null;
const loadPageData = async (lastKey, pageSize) => {
  // 终止前序未完成请求
  if (requestController) requestController.abort();
  requestController = new AbortController();
  try {
    const response = await fetch(`/your/api/path?lastId=${lastKey}&pageSize=${pageSize}`, {
      signal: requestController.signal
    });
    const data = await response.json();
    // 渲染表格、更新分页器状态
  } catch (err) {
    // 忽略主动中断的请求报错
    if (err.name !== 'AbortError') console.error('请求失败', err);
  }
}

• 单页行数因缩放变化时，不需要重置到第一页，直接用当前页的最后一条key作为参数重新拉取对应行数的数据即可，用户无感知跳转。

3. 渲染侧兜底优化 #

• 请求过程中展示和表格高度完全对齐的骨架屏，避免缩放过程中页面跳闪。
• 如果返回数据条数小于请求的pageSize（即到达最后一页），不需要强行拉伸表格行高，底部保留空白即可，符合常规交互预期。

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