在 ag-Grid 中，可通过 valueGetter 配置动态生成派生列（如两数值列之和），无需修改原始数据，支持实时响应数据变化。
在 ag-grid 中，可通过 `valuegetter` 配置动态生成派生列（如两数值列之和），无需修改原始数据，支持实时响应数据变化。
在实际业务场景中，经常需要展示基于已有字段计算得出的新值（例如“总价 = 单价 × 数量”或本例中的“z = x + y”）。ag-Grid 并不提供 function 或 computedField 这类直接属性，而是通过 valueGetter 机制实现灵活、高效、响应式的列值计算。
valueGetter 是一个函数，接收 params 对象（含 data、node、api 等上下文），返回该单元格应显示的值。它会在每次渲染、排序、筛选或数据更新时自动重新执行，确保结果始终与源数据保持同步。
✅ 正确用法示例（React + Hooks）：
const [columnDefs] = useState([
{ headerName: 'x', field: 'x', type: 'numericColumn' },
{ headerName: 'y', field: 'y', type: 'numericColumn' },
{
headerName: 'z',
valueGetter: (params) => {
// 安全处理：避免 undefined 或 null 导致 NaN
const x = Number(params.data?.x) || 0;
const y = Number(params.data?.y) || 0;
return x + y;
},
type: 'numericColumn', // 启用数字格式化、对齐与排序
}
]);? 关键注意事项：
- ❌ 不要使用已废弃的
function属性（如问题中所示），ag-Grid 不识别该配置； - ✅ 始终优先使用
valueGetter（而非cellRenderer），因前者参与排序、过滤、Excel 导出等核心功能； - ⚠️ 若源字段可能为
null/undefined/非数字，务必做类型校验与默认值处理，防止NaN渲染； - ?
valueGetter是纯函数，不应产生副作用（如修改params.data），以保证可预测性与性能； - ? 如需复杂逻辑（如依赖多行数据或外部状态），可结合
useMemo封装逻辑，但valueGetter本身应保持轻量。
总结：valueGetter 是 ag-Grid 实现计算列的官方、标准且高性能的方式。合理使用它，既能保持数据层纯净，又能灵活支撑各类业务表达式需求。
