如何基于单个单元格值为AG Grid整列设置样式？

你当前使用cellStyle的方式只会给单个匹配值的单元格设置背景色，要实现整列（所有单元格/含表头）变色的效果，需要先判断列内是否存在目标值，再给整列统一设置样式，以下是几种可行方案：

方案一：列定义时动态判断设置 #

先写一个工具函数检查列内是否存在目标值，再在列配置中动态绑定样式：

// 检查指定列是否包含目标值
function hasTargetValueInColumn(field, rowData, target) {
  return rowData.some(row => row[field] === target);
}

// 列定义
const columnDefs = [
  {
    headerName: '目标列',
    field: 'yourFieldName',
    // 设置数据单元格样式
    cellStyle: (params) => {
      const hasTarget = hasTargetValueInColumn('yourFieldName', params.api.getAllRows(), 'STRING1');
      return hasTarget ? { backgroundColor: 'lightgreen' } : {};
    },
    // 若需要表头也变色，添加headerStyle
    headerStyle: (params) => {
      const hasTarget = hasTargetValueInColumn('yourFieldName', params.api.getAllRows(), 'STRING1');
      return hasTarget ? { backgroundColor: 'lightgreen' } : {};
    }
  }
];

方案二：Grid加载后动态更新列样式 #

通过gridReady事件在表格初始化后判断并更新列样式，适合数据异步加载的场景：

function onGridReady(params) {
  const api = params.api;
  const targetField = 'yourFieldName';
  const targetValue = 'STRING1';

  // 判断列内是否存在目标值
  const hasTarget = api.getAllRows().some(row => row[targetField] === targetValue);
  
  if (hasTarget) {
    // 获取目标列定义
    const columnDef = api.getColumnDef(targetField);
    // 给整列单元格设置样式
    columnDef.cellStyle = () => ({ backgroundColor: 'lightgreen' });
    // 给表头设置样式（可选）
    columnDef.headerStyle = () => ({ backgroundColor: 'lightgreen' });
    // 刷新列生效
    api.refreshColumns();
  }
}

// 在AG Grid组件中绑定事件
<AgGridReact
  onGridReady={onGridReady}
  columnDefs={columnDefs}
  rowData={rowData}
  // 其他配置
/>

方案三：处理动态数据更新 #

如果表格数据会动态变化，需要监听rowDataChanged事件，在数据更新后重新判断并更新样式：

function onRowDataChanged(params) {
  const api = params.api;
  const targetField = 'yourFieldName';
  const targetValue = 'STRING1';

  const hasTarget = api.getAllRows().some(row => row[targetField] === targetValue);
  const columnDef = api.getColumnDef(targetField);
  
  columnDef.cellStyle = hasTarget ? () => ({ backgroundColor: 'lightgreen' }) : () => ({});
  columnDef.headerStyle = hasTarget ? () => ({ backgroundColor: 'lightgreen' }) : () => ({});
  
  api.refreshColumns();
}

// 绑定到Grid组件
<AgGridReact
  onRowDataChanged={onRowDataChanged}
  // 其他配置
/>

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