能否为ag-grid的valueFormatter函数传自定义参数？如何获取单元格值？

嘿，这个问题我之前也碰到过！直接像你写的valueFormatter: percentageFormatter(params, '10')是行不通的——因为这样写会立即执行函数，而不是让ag-grid在渲染单元格时按需调用它。不过有两种常用的方法可以实现传递自定义参数的需求，我给你拆解下：

方法一：使用高阶函数（推荐） #

你可以写一个"工厂函数"，先接收你的自定义参数，然后返回一个真正的valueFormatter函数——这个返回的函数会自动接收ag-grid传入的params对象作为第一个参数，你通过params.value就能拿到单元格的原始值。

举个例子：

// 定义一个工厂函数，接收自定义的小数位数参数
function createPercentageFormatter(decimalPlaces) {
  // 返回ag-grid需要的valueFormatter函数
  return function(params) {
    // params.value就是单元格的原始值
    const rawValue = params.value;
    // 处理空值情况
    if (rawValue == null) return '';
    // 结合自定义参数格式化值
    return `${(rawValue * 100).toFixed(decimalPlaces)}%`;
  };
}

// 在列定义中使用
const columnDefs = [
  {
    headerName: '完成率',
    field: 'completionRate',
    // 传入自定义参数10
    valueFormatter: createPercentageFormatter(10)
  }
];

方法二：用箭头函数包裹 #

如果你不想写工厂函数，也可以用箭头函数直接包裹你的格式化函数，这样ag-grid会把params传给箭头函数，你再手动把它和自定义参数一起传给你的格式化函数：

// 你的格式化函数，接收params和自定义参数
function percentageFormatter(params, decimalPlaces) {
  const rawValue = params.value;
  if (rawValue == null) return '';
  return `${(rawValue * 100).toFixed(decimalPlaces)}%`;
}

// 在列定义中使用箭头函数包裹
const columnDefs = [
  {
    headerName: '完成率',
    field: 'completionRate',
    valueFormatter: (params) => percentageFormatter(params, '10')
  }
];

⚠️ 注意：这种方式在类组件中可能会导致每次渲染都创建新的箭头函数，对性能有轻微影响，简单场景没问题，但复杂表格更推荐用第一种高阶函数的方式。

关键提醒 #

不管用哪种方法，ag-grid都会自动把包含单元格所有信息的params对象作为第一个参数传给最终执行的格式化函数，你只需要通过params.value就能获取到单元格的原始值。

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