MUI X Data Grid v5如何识别脏字段？批量更新单元格需求

1. 判断单元格脏状态的方法 #

在启用experimentalFeatures={{ newEditingApi: true }}的情况下，Data Grid提供了两个核心方法判断单元格/行的脏状态：

• apiRef.current.getCellState(rowId, field)：获取指定单元格的状态，返回对象中的isDirty字段为true时，说明该单元格已被修改（脏状态）
• apiRef.current.getDirtyCells()：获取所有脏单元格的集合，返回结构为{ [rowId]: { [field]: { value: 修改后的值 } } }，可通过检查目标单元格是否在这个集合中判断脏状态

2. 实现编辑后批量更新逻辑 #

通过监听onCellEditCommit事件，在用户完成Amount单元格编辑后，遍历目标行并更新非脏状态的Amount值：

代码示例

import { DataGrid, useGridApiRef } from '@mui/x-data-grid';

// 初始化示例数据
const initialRows = [
  { id: 1, amount: 50 },
  { id: 2, amount: 50 },
  { id: 3, amount: 50 },
  { id: 4, amount: 50 },
  { id: 5, amount: 50 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'amount', headerName: 'Amount', width: 150, editable: true },
];

export default function AmountSyncGrid() {
  const apiRef = useGridApiRef();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        apiRef={apiRef}
        experimentalFeatures={{ newEditingApi: true }}
        rows={initialRows}
        columns={columns}
        onCellEditCommit={(params) => {
          // 只处理Amount字段的编辑事件
          if (params.field !== 'amount') return;

          const editedRowId = params.id;
          const newAmountValue = params.value;

          // 获取所有行，筛选出当前编辑行及下方的行
          const allRows = apiRef.current.getRows();
          const targetRows = allRows.filter(row => row.id >= editedRowId);

          targetRows.forEach(row => {
            // 检查当前行的Amount单元格是否为脏状态
            const cellState = apiRef.current.getCellState(row.id, 'amount');
            if (!cellState?.isDirty) {
              // 更新非脏状态的单元格
              apiRef.current.updateRows([{ id: row.id, amount: newAmountValue }]);
            }
          });
        }}
      />
    </div>
  );
}

关键说明 #

• 编辑完成的行（如示例中的Id3）本身会被标记为脏状态，因此不会被重复更新，符合需求中“Id3及下方未修改行”的要求
• 若使用getDirtyCells()判断，可将检查逻辑替换为：

  const dirtyCells = apiRef.current.getDirtyCells();
  const isCellDirty = !!dirtyCells[row.id]?.['amount'];
  if (!isCellDirty) { /* 更新逻辑 */ }
  

• 所有更新操作通过updateRows方法完成，会自动维护表格状态，不会影响已修改的脏单元格

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