本文介绍如何使用 ag-Grid 的 valueGetter 配置动态生成计算列（如两列数值相加），无需修改原始数据，即可在表格中实时展示派生字段。
本文介绍如何使用 ag-grid 的 `valuegetter` 配置动态生成计算列（如两列数值相加），无需修改原始数据，即可在表格中实时展示派生字段。
在 ag-Grid 中，若需添加一列用于显示两个已有数值列（如 x 和 y）的实时和（即 z = x + y），不应使用 function 属性（该属性并不存在于列定义中），而应正确使用官方支持的 valueGetter 回调函数。valueGetter 在每一行渲染时被调用，接收包含当前行数据的 event 对象（event.data），返回该单元格应显示的值。
以下是一个完整、可运行的配置示例：
const [columnDefs] = useState([
{ headerName: 'x', field: 'x', type: 'numericColumn' },
{ headerName: 'y', field: 'y', type: 'numericColumn' },
{
headerName: 'z (x + y)',
valueGetter: (params) => {
// 安全处理：防止 null/undefined 导致 NaN
const x = params.data?.x ?? 0;
const y = params.data?.y ?? 0;
return x + y;
},
type: 'numericColumn', // 可选：启用数字列默认样式（右对齐、千分位等）
}
]);
✅ 关键要点说明：
-
valueGetter是标准且推荐的方式，适用于所有版本的 ag-Grid（Community & Enterprise）； - 参数名推荐使用
params（而非event），更符合官方文档与 TypeScript 类型定义（ICellRendererParams）； - 建议加入空值防护（
?? 0），避免因某列为null或undefined导致整个结果为NaN； - 可为计算列显式指定
type: 'numericColumn'，以继承数字列的格式化、排序与过滤行为； - 计算逻辑完全响应式：当
x或y对应的数据更新时（例如通过api.applyTransaction()），z列将自动重新计算并刷新显示。
⚠️ 注意：不要尝试在 field 属性中填写表达式（如 'x + y'），field 仅支持字符串路径（如 'user.name'），不支持运算；也不应使用已废弃或非标准的 function 键——它不会被 ag-Grid 识别。
通过 valueGetter，你还能实现更复杂的逻辑，例如条件计算、格式化文本、跨行引用，甚至异步获取（配合 valueFormatter 或自定义 cellRenderer 进一步增强）。但对简单算术聚合而言，上述配置即简洁又健壮，是生产环境的最佳实践。
