Angular Ag-Grid：getRowStyle设置行色致多行选中高亮失效求解决方案

我来帮你搞定这个问题——你遇到的是Ag-Grid行样式优先级冲突的典型场景：自定义行背景直接覆盖了选中行的高亮样式。这里有两种靠谱的兼容方案，你可以根据需求选择：

方案一：通过CSS优先级+行状态判断保留默认高亮 #

这种方式既能保留Ag-Grid原生的选中高亮逻辑，又能正常显示自定义行背景：

步骤1：修改changeRowColor方法，只给非选中行应用自定义背景 #

changeRowColor(params) {
  // 仅当行未被选中时，应用自定义背景色
  if (!params.node.isSelected()) {
    return { 'background-color': params.data.backgroundColor };
  }
  // 选中行返回空样式，让Ag-Grid默认高亮生效
  return {};
}

步骤2（可选）：自定义选中行高亮色 #

如果你想替换Ag-Grid默认的选中高亮色，可以在组件的CSS文件中添加：

:host ::ng-deep .ag-row.ag-row-selected {
  background-color: #e3f2fd !important; /* 替换成你想要的高亮色 */
}

方案二：在样式函数中动态合并选中状态样式 #

这种方式不需要额外写CSS，直接在changeRowColor里处理两种状态的样式叠加，适合需要自定义选中行混合色的场景：

changeRowColor(params) {
  const rowStyle = {};
  
  // 先应用自定义背景色
  if (params.data.backgroundColor) {
    rowStyle['background-color'] = params.data.backgroundColor;
  }

  // 如果行被选中，叠加高亮样式（可以用自定义色，或者混合透明度）
  if (params.node.isSelected()) {
    // 方式1：直接替换为高亮色
    rowStyle['background-color'] = '#f5f5f5';
    // 方式2：用透明度混合自定义色和高亮色（比如让自定义色半透明，透出高亮底色）
    // rowStyle['background-color'] = `${params.data.backgroundColor}80`;
  }

  return rowStyle;
}

为什么原代码会失效？ #

Ag-Grid的选中行样式和getRowStyle返回的行内样式优先级相近，当你无条件返回自定义背景色时，会直接覆盖选中行的高亮样式。通过判断params.node.isSelected()状态，我们可以让两种样式在不同场景下生效，完美兼容。

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