AG Grid自定义CSS消除行双边框，滚动时效果异常求助

原因 #

这是AG Grid的虚拟滚动机制导致的：AG Grid不会一次性渲染所有行，滚动时会销毁离开视口的行DOM，同时动态渲染进入视口的新行。你的CSS相邻兄弟选择器.ag-row:not(.total-row) + .ag-row:not(.total-row)依赖静态的DOM相邻关系，虚拟滚动重建行时，新渲染的行无法稳定触发该选择器的匹配逻辑，导致部分行的上边框样式失效，且失效行随滚动随机变化。

解决办法 #

方法1：使用AG Grid内置的rowClassRules配置（推荐） #

通过AG Grid的配置直接给非total行标记类名，避免依赖DOM结构的相邻关系：

// 网格配置中添加rowClassRules
rowClassRules: {
  'non-total-row': params => !params.node.rowClass.includes('total-row')
}

然后修改CSS，直接控制类名样式：

/* 给所有非total行统一设置上边框 */
.non-total-row {
  border-top: 1px solid #ddd;
}
/* 第一行去掉上边框（如果不需要顶部边框） */
.non-total-row:first-of-type {
  border-top: none;
}
/* 给total行之后的非total行保留上边框（确保total行与普通行的分隔） */
.total-row + .non-total-row {
  border-top: 1px solid #ddd;
}

方法2：调整CSS策略，不依赖相邻选择器 #

改用边框重叠的方式，给所有非total行设置上边框，同时用负margin让相邻行边框重叠：

.ag-row:not(.total-row) {
  border-top: 1px solid #ddd;
  margin-top: -1px;
}
/* 第一行去掉负margin和上边框 */
.ag-row:not(.total-row):first-of-type {
  margin-top: 0;
  border-top: none;
}
/* 单独设置total行的边框样式（如果需要突出） */
.total-row {
  border-top: 2px solid #333;
  margin-top: 0;
}

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