AG Grid可编辑比率数字字段：如何始终显示百分比而非比率？

你的问题核心是：valueFormatter只负责非编辑状态的单元格显示格式，编辑状态下的内容由单元格编辑器控制，所以需要单独配置编辑器的初始显示值，并同步调整解析逻辑。

具体解决方案 #

根据你需要的显示效果（编辑器带不带%符号），有两种常用配置方式：

方式1：编辑器显示纯数字（代表百分比，不带%）

适合用户直接输入数字（比如输入50代表50%），配置如下：

{
  field: 'weight',
  editable: true,
  // 非编辑状态显示带%的百分比
  valueFormatter: (params) => `${params.value * 100}%`,
  // 使用AG Grid内置的数字编辑器
  cellEditor: 'agNumberCellEditor',
  cellEditorParams: {
    // 编辑器初始化时，把存储的比率转成百分比数字显示
    valueFormatter: (params) => params.value * 100
  },
  // 把用户输入的百分比数字转回比率存储
  valueParser: (params) => Number(params.newValue) / 100
}

方式2：编辑器显示带%符号的文本

如果要让编辑时也看到%符号，用文本编辑器配合解析逻辑：

{
  field: 'weight',
  editable: true,
  // 非编辑状态显示带%的百分比
  valueFormatter: (params) => `${params.value * 100}%`,
  // 使用文本编辑器
  cellEditor: 'agTextCellEditor',
  cellEditorParams: {
    // 编辑器初始化时显示带%的完整百分比文本
    valueGetter: (params) => `${params.value * 100}%`
  },
  // 解析时去掉%符号，转成比率存储
  valueParser: (params) => {
    const rawInput = params.newValue.replace(/%/g, '').trim();
    // 处理非法输入，保留原值避免报错
    return isNaN(rawInput) ? params.oldValue : Number(rawInput) / 100;
  }
}

关键说明 #

AG Grid没有专门的一键配置实现这个需求，核心是分开处理两种状态的显示：

• 非编辑状态：靠valueFormatter转换格式
• 编辑状态：通过cellEditorParams里的配置，把存储的比率转成百分比格式显示，再通过valueParser把用户输入的百分比转回比率存储

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