Ant Design Table 自动填充容器高度：基于语义化 classNames 与 ResizeObserver 的 AutoHeightTable 封装实战

导读

在真实后台界面中，Table 常常需要被放进一个高度受限（例如 height: 400、flex 布局剩余空间）的容器内，并希望它始终自动填满容器：表体随容器高度伸缩、内部纵向滚动，而不是让整页产生滚动条。本指南以 ant-design 仓库中 auto-height 示例 为蓝本，拆解一个通用 HOC AutoHeightTable 的完整实现——它综合运用了 Table 的 scroll.y、语义化 classNames/styles、nativeElement 实例引用与 ResizeObserver 测量，读完你可以在自己的项目中直接复用这套“自适应表格”方案。

示例诉求：始终填充容器高度

官方示例的定位非常聚焦，见 auto-height.md：

通过封装，实现 Table 始终自动填充容器高度。（Wrap Table to make it always fill the container height automatically.）

它解决的典型问题是：antd Table 的 scroll.y 是一个静态数值。容器尺寸变化、表头/分页栏尺寸变化时，写死的滚动高度不会跟随调整，导致表格要么留白、要么溢出。示例的思路不是修改组件内部，而是在外面包一层高阶组件（HOC），用真实 DOM 测量把“表体可用高度”动态计算出来，再回填给 Table。

示例的 UI 由三部分组成（见 auto-height.tsx）：

• 一个 Switch，切换 “30 行数据”与“2 行数据”，用来观察数据量变化时表格行为；
• 一个固定 height: 400、带内边距的灰色容器，模拟“内容区高度受限”的真实场景；
• 容器内放置 <AutoHeightTable columns={columns} dataSource={mergedData} />。

HOC 整体结构：类型定义与 props 透传

AutoHeightTable 本质是一个泛型 HOC，声明如下（auto-height.tsx）：

type AutoHeightTableProps<RecordType extends object> = Omit<
  TableProps<RecordType>,
  'styles' | 'classNames'
>;

const AutoHeightTable = <RecordType extends object>(props: AutoHeightTableProps<RecordType>) => {
  const { scroll, style, ...restProps } = props;
  const rootRef = useRef<GetRef<typeof Table>>(null);
  const [scrollY, setScrollY] = useState(0);
  const [sectionHeight, setSectionHeight] = useState(0);
  // ...
};

几个值得注意的设计点：

1. Omit<'styles' | 'classNames'>：内部实现需要占用 Table 的 classNames（打测量锚点）和 styles（控制 section 高度），因此从 props 类型中显式剔除，避免调用方误传导致冲突；
2. GetRef<typeof Table>：antd Table 支持 forwardRef，通过 ref 拿到的是底层 @rc-component/table 的 Reference 实例，在此基础上 antd 额外暴露了 nativeElement（根 DOM 节点）。参见 InternalTable.tsx 中 useProxyImperativeHandle 的实现：它把 rc-table 的实例方法与 nativeElement: rootRef.current 合并后一并对外暴露；
3. scroll 与 style 被解构出来单独加工（合并用户传入值），其余 props 原样透传。

测量锚点：用 classNames 打上标记

为了让测量代码不依赖 antd 内部 DOM 类名（例如 .ant-table-thead），示例优先使用 Table 语义化 classNames 在关键区域打上自定义标记：

// ===================== HOC =====================
const measureClassNames = {
  header: 'measure-header',
  pagination: 'measure-pagination',
};

const tableClassNames = {
  header: {
    wrapper: measureClassNames.header,
  },
  pagination: {
    root: measureClassNames.pagination,
  },
};

antd Table 的语义化命名空间在 InternalTable.tsx 中定义：classNames 支持 root / section / title / footer / body / content / header / pagination 等层级，其中 header 还能细化到 wrapper/cell/row，pagination 对齐 Pagination 组件的语义类。示例正是用了 header.wrapper（表头外层容器）与 pagination.root（分页根节点）作为可复用的测量锚点；配套的语义说明见 _semantic.tsx。

这种做法的收益是：即使主题/样式覆盖导致 .ant-table-* 类名外观变化，锚点依然有效，测量逻辑与视觉实现解耦。

高度计算：getHeight 与测量公式

单个区块的“真实占用高度”

getHeight 负责读取一个 DOM 区块的总高度，连 margin 一起计入（auto-height.tsx）：

const getHeight = (className: string | HTMLElement) => {
  const ele =
    typeof className === 'string'
      ? rootRef.current?.nativeElement?.querySelector<HTMLElement>(`.${className}`)
      : className;

  if (ele) {
    const styles = getComputedStyle(ele);
    const marginTop = Number.parseFloat(styles.marginTop) || 0;
    const marginBottom = Number.parseFloat(styles.marginBottom) || 0;

    return ele.getBoundingClientRect().height + marginTop + marginBottom;
  }

  return 0;
};

要点：

• 传入字符串时，通过 nativeElement.querySelector('.xxx') 找到之前用 classNames 标记的元素；
• 只取 getBoundingClientRect().height 是不够的——例如 antd 分页组件自带上下 margin，示例通过 getComputedStyle 读取 marginTop/marginBottom 补全，Number.parseFloat(...) || 0 兜底非数字情况。

核心测量公式

在 useEffect 中完成首轮测量并建立观察（auto-height.tsx）：

const measure = () => {
  const totalHeight = getHeight(element);
  const headerHeight = getHeight(measureClassNames.header);
  const paginationHeight = getHeight(measureClassNames.pagination);

  setScrollY(Math.max(0, Math.floor(totalHeight - headerHeight - paginationHeight)));
  setSectionHeight(totalHeight - paginationHeight);
};

两个派生值各司其职：

• scrollY = max(0, floor(totalHeight − headerHeight − paginationHeight))
  • totalHeight：容器（nativeElement）整体高度；
  • 减去表头与分页后，余下的就是表体纵向滚动区应占的高度，即 scroll.y 的目标值；
  • Math.floor 用于抹平亚像素（浏览器对小数高度的取整差异），Math.max(0, …) 防止表头加分页超过容器时出现负高度。
• sectionHeight = totalHeight − paginationHeight
  • 这里 section 指表格主体 section（见下文），减去分页高度后赋给它，使分页固定在底部、主体吃满剩余空间。

ResizeObserver：让高度“自动跟随”

固定高度只在首帧生效是不够的。示例用 ResizeObserver 监听 Table 根节点（auto-height.tsx）：

measure();

const resizeObserver = new ResizeObserver(measure);
resizeObserver.observe(element);

return () => {
  resizeObserver.disconnect();
};

• 挂载后先同步执行一次 measure()，得到初始高度；
• 之后只要容器尺寸变化（窗口缩放、侧栏折叠、flex 分配变化等），ResizeObserver 都会重新执行 measure；
• 卸载时 disconnect()，避免泄漏。

这也是“自动填充”能成立的关键：scroll.y 由 state 驱动，容器一变，state 更新触发 Table 重渲染，滚动区高度即时收敛。

将测量结果写回 Table：scroll、style、styles

最终把计算值“灌回”Table（auto-height.tsx）：

return (
  <Table<RecordType>
    {...restProps}
    ref={rootRef}
    scroll={{ ...scroll, y: scrollY }}
    style={{ ...style, height: '100%' }}
    styles={{
      section: {
        height: sectionHeight,
      },
    }}
    classNames={tableClassNames}
  />
);

逐项解释其作用：

配置	值	作用
scroll.y	动态 scrollY	把表体约束在“容器 − 表头 − 分页”的高度内，配合固定表头让表体内部滚动，而不是撑高容器
style.height	'100%'	让 Table 根节点占满外层容器（外层容器需给足确定高度）
styles.section	{ height: sectionHeight }	语义化 styles.section 把 section（.ant-table-container 所对应的主体容器）高度锁定为扣除分页后的剩余空间
classNames	tableClassNames	继续为 header.wrapper、pagination.root 提供测量锚点

关于 styles.section 对应的 DOM，仓库测试提供了直接证据：在 semantic.test.tsx 中，测试把 section 的 class/style 应用后断言其落点：

const section = container.querySelector('.ant-table-container');
expect(section).toHaveClass(testClassNames.section);
expect(section).toHaveStyle(testStyles.section);

也就是说，styles={{ section: {...} }} 最终会作用于 .ant-table-container 这个承载表格主体的容器节点，从而保证“分页固定在底部、表体自适应填充”的布局效果。测试覆盖了 classNames/styles 的 root/section/header/pagination 等语义键，与本例用法一致。

与固定表头（scroll.y）机制的关系

设置非零 scroll.y 后，表体会进入“固定表头 + 内部纵向滚动”模式：表头吸顶，表体滚动区高度等于 y。AutoHeightTable 的巧妙之处在于把 y 从“手工写死的常量”升级为“实时测量结果”——既保留固定表头/独立滚动体验，又不丢失“容器自适应”能力。官方同样展示了这种组合的静态形态，可对照 fixed-header 示例 与 fixed-columns-header 示例 理解 scroll 在纵向/横向上的职责边界。

在业务项目中复用的接入方式

AutoHeightTable 是纯封装，接入成本很低：

// 外层容器必须具有确定高度（固定 px、flex 分配或 100% 均可）
<div style={{ height: 400, padding: 16, boxSizing: 'border-box' }}>
  <AutoHeightTable<DataType> columns={columns} dataSource={data} />
</div>

组合使用时的若干注意点：

• 外层容器高度必须是确定且可被测量的；若父级只有内容撑开的高度，totalHeight 与内容同增长，无法形成“滚动区”，自动填充也就失去了意义。flex 场景建议配合 min-height: 0/overflow: hidden 让子容器拿到真实约束高度；
• Table 的 scroll.x、pagination、loading、rowSelection 等其余 props 会经 restProps 原样透传，可与分页、选择、排序、固定列等能力自由组合；
• 若同时自定义 styles/classNames，注意 HOC 类型里已将其剔除，需在 HOC 内部扩展透传通道；
• 分页在数据量不足一页时不会渲染，此时 paginationHeight 测量为 0，公式退化为 总高 − 表头，行为依然正确；
• 如需监听“容器高度变化以外的重排”（如表头换行导致高度变化），可在 HOC 内将 ResizeObserver 的观测目标扩展为表头区块，或改用更高频的窗口 resize 兜底（牺牲少量性能换取兼容性）。

仓库中所有 demo 均会被渲染测试所覆盖，demo.test.tsx 与 demo-extend.test.ts 会逐一挂载 demo 目录下的示例，确保像 AutoHeightTable 这样的封装在真实渲染链路中始终可用，可作为你改造时的回归测试参考。

小结：一句话记住这套方案

AutoHeightTable = 测量锚点（classNames）+ 实例根节点（nativeElement）+ 动态 scroll.y + ResizeObserver 重测 + section 高度锁定。

它不依赖任何魔改或内部私有 API，完全建立在 antd Table 公开的语义化能力之上（相关类型定义见 InternalTable.tsx 的 TableProps），因此可以直接从 auto-height.tsx 原样拷贝到业务代码中，按需调整容器约束条件即可获得一个始终填满容器、且表体自滚动的自适应表格。