如何设置ag-grid输入框仅允许输入0.00~100.00范围的十进制数值

核心配置调整 #

你需要修改百分比列的colDef（列定义）配置，替换原有整数输入的相关参数，完整配置示例如下：

// 百分比列定义
const percentColumnDef = {
  field: 'percent',
  headerName: '百分比',
  editable: true,
  // 指定使用ag-grid自带的数值编辑器
  cellEditor: 'agNumberCellEditor',
  cellEditorParams: {
    min: 0, // 最小值限制
    max: 100, // 最大值限制
    step: 0.01, // 步长设为0.01，支持两位小数调整
    precision: 2 // 强制保留两位小数
  },
  // 格式化展示：无论输入什么，最终展示为两位小数格式
  valueFormatter: (params) => {
    if (!params.value && params.value !== 0) return '';
    return Number(params.value).toFixed(2);
  },
  // 输入值解析+合法性校验
  valueParser: (params) => {
    const inputNum = parseFloat(params.newValue);
    // 非法值、超出范围值直接返回旧值，不生效
    if (isNaN(inputNum) || inputNum < 0 || inputNum > 100) {
      return params.oldValue;
    }
    // 合法值保留两位小数后返回
    return Number(inputNum.toFixed(2));
  },
  // 键盘输入拦截，避免输入数字、小数点之外的非法字符
  cellKeyPress: (params) => {
    const inputChar = String.fromCharCode(params.event.charCode);
    const currentInput = params.event.target.value;
    // 仅允许输入数字和小数点，且小数点只能出现一次
    if (!/[0-9.]/.test(inputChar) || (inputChar === '.' && currentInput.includes('.'))) {
      params.event.preventDefault();
      return false;
    }
    return true;
  }
}

问题排查 #

如果配置后还是只能输入整数，优先检查两个配置项：

• 是不是之前的cellEditorParams中设置了precision: 0或者step:1，删除原有配置替换为上述参数即可
• 是不是自定义了编辑器逻辑，修改对应编辑器的数值校验规则即可

内容的提问来源于stack exchange，提问作者Rajesh Kumar Duraisamy