在 ag grid 中，可通过自定义 valueformatter 函数，根据当前行首列（如 rowtype）的值动态决定该单元格的显示格式——例如将 "percentage" 行渲染为百分比（13.8%），而 "value" 行渲染为带千分位的浮点数（2,345.6）。
在 ag grid 中，可通过自定义 valueformatter 函数，根据当前行首列（如 rowtype）的值动态决定该单元格的显示格式——例如将 "percentage" 行渲染为百分比（13.8%），而 "value" 行渲染为带千分位的浮点数（2,345.6）。
AG Grid 本身不支持“按行设置格式”的声明式配置（如 rowDefs），但其 valueFormatter 函数提供了丰富的上下文参数——尤其是 params.node 和 params.data，使你能够访问整行数据。因此，核心思路是：在每一列的 valueFormatter 中，检查该行标识字段（如 type 或首列值），再分支处理格式逻辑。
以下是一个完整、可直接运行的示例：
// 假设原始数据结构如下：
const rowData = [
{ type: 'value', col1: 2345.6, col2: 3677.7 },
{ type: 'percentage', col1: 0.138, col2: 0.096 }
];
// 列定义（所有数值列复用同一 formatter）
const columnDefs = [
{ field: 'type', headerName: '', width: 120, suppressMenu: true, sortable: false },
{
field: 'col1',
headerName: 'Col 1',
valueFormatter: params => {
if (params.data?.type === 'percentage') {
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 1,
maximumFractionDigits: 1
}).format(params.value);
} else if (params.data?.type === 'value') {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}).format(params.value);
}
return params.value; // fallback
}
},
{
field: 'col2',
headerName: 'Col 2',
valueFormatter: params => {
// 同上，逻辑完全一致 —— 可提取为复用函数
if (params.data?.type === 'percentage') {
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 1,
maximumFractionDigits: 1
}).format(params.value);
} else if (params.data?.type === 'value') {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}).format(params.value);
}
return params.value;
}
}
];✅ 关键要点说明：
- 不要尝试按行配置格式：AG Grid 的格式控制粒度是「列 × 单元格」，而非「行」；但借助 params.data 可轻松实现“行为感知”；
- 推荐封装复用逻辑：将 formatter 提取为独立函数（如 rowAwareNumberFormatter），避免重复代码；
- 注意数据类型一致性：百分比行中，原始值应为小数（如 0.138），而非字符串 "13.8%"，以确保计算与排序正确；
- 空值/异常防护：务必检查 params.data 和 params.value 是否存在，防止运行时错误；
- 若需支持国际化（如德语千分位为 .、小数为 ,），Intl.NumberFormat 会自动适配 navigator.language 或显式传入 locale。
? 进阶提示：若格式规则复杂（如多级类型、条件嵌套），可结合 cellClassRules 动态添加 CSS 类，再通过 CSS 控制对齐或颜色，实现更丰富的视觉区分。
总之，AG Grid 的灵活性正体现在这种“数据驱动格式”的设计哲学中——格式不是静态绑定到列，而是动态响应每一条数据的语义。
