如何实现Ag-grid单元格仅在值偏离初始值时变色，恢复初始值不变色？

核心思路 #

问题出在onValueChanged里的oldValue仅记录上一次修改后的值，而非单元格的原始初始值。要实现需求，必须提前保存每个单元格的初始值，后续对比时用新值和初始值判断，而非新旧值对比。

具体实现方法 #

方法1：初始化时在rowData中添加初始值字段 #

在加载表格数据时，给每一行的目标字段额外添加一个存储初始值的属性（比如originalNum）：

// 假设原始数据结构
const rowData = [
  { num: 1 },
  { num: 3 },
  // ...其他行数据
];

// 预处理数据，保存初始值到额外字段
const processedRowData = rowData.map(item => ({
  ...item,
  originalNum: item.num // 固定初始值
}));

然后修改单元格样式的判断逻辑，直接对比当前值和初始值：

// 在columnDefs的cellStyle配置中使用
cellStyle: function(params) {
  // 仅当当前值不等于初始值时，应用红色样式
  return params.value !== params.data.originalNum ? { color: 'red' } : {};
}

方法2：表格初始化后批量保存初始值（适合动态数据场景） #

如果无法提前修改rowData，可以在表格初始化完成后，通过ag-grid的API遍历行节点，把初始值存入每行数据：

// 在onGridReady回调中执行
onGridReady: function(params) {
  params.api.forEachNode(node => {
    // 给每行数据追加初始值字段
    node.data.originalNum = node.data.num;
  });
}

之后同样用params.data.originalNum和当前值对比来控制样式。

为什么不用oldValue？ #

params.oldValue是上一次编辑后的临时值，比如从1→2→1的流程中，第二次编辑的oldValue是2、newValue是1，此时新旧值不等，但实际是回到了初始状态，用新旧值对比会误触发样式。而直接对比当前值和初始值，就能准确判断是否偏离了原始状态。

场景验证 #

• 初始值1→修改为2：2 !== 1 → 文字变红
• 从2改回1：1 === 1 → 样式恢复默认

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