ag-grid中NoRowsOverlay/overlayNoRowsTemplate位置超出列范围或与表头重叠的技术咨询

我之前帮不少开发者排查过ag-grid里这个NoRowsOverlay错位、和表头重叠的问题，咱们先拆解下可能的成因，再一步步解决：

一、常见成因 #

• 自定义模板样式冲突：如果你用了overlayNoRowsTemplate自定义无数据提示，模板里的样式没遵循ag-grid的默认布局规则，比如擅自设置了position: absolute却没指定正确的定位父容器，或者覆盖了ag-grid内置的overlay类样式。
• 表格容器布局异常：表格所在的父容器设置了overflow: hidden、position: fixed这类属性，导致overlay的定位基准被打乱；或者表格容器高度塌陷（比如没设置固定高度/百分比高度），让overlay的计算范围出错。
• 固定表头（Floating Header）层级问题：当开启了ag-grid的浮动表头功能时，表头的z-index默认比overlay高，就会出现重叠；或者表头的定位方式导致overlay被压在下面。
• 版本兼容性bug：某些旧版本的ag-grid（比如v24及更早）在特定框架（React/Vue）或布局场景下，存在overlay定位计算的bug。

二、针对性解决办法 #

1. 规范自定义模板的样式 #

如果你用了自定义模板，务必基于ag-grid的内置类来编写，不要随意修改定位规则：

<!-- 正确的自定义模板示例 -->
<script type="text/template" id="custom-no-rows">
  <div class="ag-overlay-no-rows-center">
    <div class="custom-no-data-text">暂无数据，请刷新重试</div>
  </div>
</script>

如果需要自定义样式，只修改内容的字体、颜色等，不要动position、top、left这类定位属性，让ag-grid自己处理布局。

2. 修复表格容器的布局 #

• 确保表格容器设置了明确的高度（比如height: 500px或者height: 100%，如果是百分比高度要保证父容器也有高度），避免容器高度塌陷。
• 检查父容器的overflow属性，不要设置overflow: hidden，或者如果必须设置，要确保overlay的范围在容器可视区内。

3. 调整层级解决表头重叠 #

如果是和固定表头重叠，通过CSS提升overlay的z-index：

.ag-overlay-no-rows-wrapper {
  z-index: 100; /* 浮动表头默认z-index是99，设置更高的值即可 */
}

4. 更新ag-grid到稳定版本 #

如果你的ag-grid版本比较旧，建议升级到最新的稳定版（比如v30+），官方已经修复了很多布局相关的bug，包括overlay定位的问题。

5. 强制刷新overlay布局 #

有时候表格数据更新后，overlay没有重新计算位置，可以在数据更新完成后调用ag-grid的API强制刷新：

// 假设你拿到了gridApi实例
gridApi.refreshOverlay();

要是还有特定的场景细节（比如用的是React/Vue版本、有特殊的页面布局），可以再补充信息，但上面这些方案应该能解决大部分情况了。

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