在 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 实现计算列的官方、标准且高性能的方式。合理使用它，既能保持数据层纯净，又能灵活支撑各类业务表达式需求。