删除表格行页脚上移、空表占位及分页功能实现咨询

固定页脚，解决删除数据行时footer上移 #

仅给表格外层设置固定min-height无法适配不同视口高度、不同数据量的场景，改用全局flex布局实现sticky footer效果：

• 页面最外层根容器添加样式：min-height: 100vh; display: flex; flex-direction: column;
• 包裹表格的主内容区域添加样式：flex: 1;，该区域会自动撑满页眉和页脚之外的剩余视口高度
• 页脚直接放在根容器内、主内容区域之后，无需额外绝对定位，不管内容区高度多少，页脚始终停留在页面底部；内容超过视口高度时，页脚会随页面滚动到最底部，不会遮挡正文。

空数据状态展示占位行 #

现有代码的空状态逻辑位置错误：空行判断写在了data.map的循环内部，当数据为空时map方法不会执行，空行永远无法渲染。调整TBody渲染逻辑如下：

<TBody quiet={quiet}>
  {
    data?.length > 0 
    // 有数据时正常渲染行
    ? data.map((row, i) => (
        <Tr key={i} order={i} quiet={quiet}>
          {keysToRender.map((item, i2) => (
            <Td order={i2} divider={divider} key={i2}>
              {row[item]}
            </Td>
          ))}
          {buttons?.map((item, i) => <Td key={i}>{/* 原有按钮渲染逻辑 */}</Td>)}
          {icons?.map((item, i) => <Td key={i}>{/* 原有图标渲染逻辑 */}</Td>)}
        </Tr>
      ))
    // 无数据时渲染占位空行，行高与正常数据行保持一致
    : Array.from({ length: 10 }).map((_, i) => (
        <Tr key={`empty-${i}`} quiet={quiet}>
          {keysToRender.map((_, i2) => (
            <Td order={i2} divider={divider} key={i2}>
              {i === 0 && i2 === 0 ? '暂无供需信息' : ''}
            </Td>
          ))}
          {buttons?.map((_, i) => <Td key={`empty-btn-${i}`}>-</Td>)}
          {icons?.map((_, i) => <Td key={`empty-icon-${i}`}>-</Td>)}
        </Tr>
      ))
  }
</TBody>

如果需要占位区域刚好撑满表格容器，可根据容器高度、表头高度、单行高度动态计算空行数量，适配性优于固定min-height方案。

大数据量异常修复+分页功能实现 #

数据量较大时的显示异常基本是一次性渲染过多DOM节点导致的性能问题，通过分页控制单次渲染的数据量即可解决，实现步骤：

• 新增两个状态：当前页码currentPage（默认值为1）、每页显示条数pageSize（可根据业务需求设为10/20/50）
• 对全量数据做切片，仅渲染当前页对应的数据：const displayData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize)，将TBody遍历的数据源从原始data替换为displayData
• 在表格底部添加分页控件，包含总条数展示、上一页/下一页按钮、页码选择器，切换页码时更新currentPage的值即可
• 若后续单页数据量仍较大，可叠加虚拟滚动方案优化，常规供需信息场景下分页足够解决渲染异常问题。

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