Ag-Grid/React单元格格式切换：双击显完整数字，离开恢复两位小数

不用修改原始数据，靠维护一个临时激活状态来切换单元格的显示格式即可，具体步骤如下：

1. 添加状态记录激活的单元格
   在你的组件里定义一个状态，用来标记当前需要显示完整数字的单元格：

const [activeCell, setActiveCell] = useState(null); // 结构为 { rowId: string, colId: string }

2. 修改valueFormatter根据状态切换显示
   更新列定义里的valueFormatter，判断当前单元格是否处于激活状态，决定显示完整数字还是两位小数：

const colDefs = [
  // 其他列配置
  {
    headerName: '价格',
    field: 'price',
    valueFormatter: (params) => {
      const isActive = activeCell?.rowId === params.node.id && activeCell?.colId === params.column.colId;
      // 激活状态显示完整数字，否则显示两位小数
      return isActive ? params.value?.price?.toString() : params.value?.price?.toFixed(2);
    }
  }
];

3. 绑定双击事件设置激活状态
   在双击事件里把当前单元格标记为激活状态：

const manageCellDoubleClick = (params) => {
  setActiveCell({
    rowId: params.node.id,
    colId: params.column.colId
  });
};

4. 绑定点击事件重置激活状态
   给Grid添加点击事件，当点击其他单元格或网格空白区域时，清空激活状态，恢复两位小数显示：

<Grid
  onGridReady={onGridReady}
  {...gridOptions}
  quickFilterText={searchValue}
  onCellDoubleClicked={manageCellDoubleClick}
  // 点击网格空白区域重置
  onBodyClicked={() => setActiveCell(null)}
  // 点击其他单元格重置
  onCellClicked={(params) => {
    if (activeCell?.rowId !== params.node.id || activeCell?.colId !== params.column.colId) {
      setActiveCell(null);
    }
  }}
/>

说明 #

• 这种方式完全不会修改原始数据，复制、粘贴、导出操作依然会使用原始的完整数字。
• 激活状态仅在前端临时维护，页面刷新后会自动重置。

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