MUI - 在 DataGrid 中禁用多行选择

Question

我想阻止 MUI DataGrid 多复选框部分。当我 select 复选框部分时，特定行应 select 而其他行保持未 selected。我尝试了 disableMultipleSelection 选项，但它不起作用。

<DataGrid
  rows={cycle}
  columns={columns}
  pageSize={10}
  checkboxSelection
  disableMultipleSelection
  onRowSelected={({ data, isSelected }) => {
    setDisplay(isSelected);
    setCycleId(data.key);
    setCycleImg(data.storageRef);
  }}
/>

Answer 1

要禁用多行选择，您必须将 checkboxSelection 属性设置为 false。 disableMultipleSelection 仅适用于 DataGridPro, not DataGrid。

<DataGrid
  {...props}
  checkboxSelection={false} // or remove it because it's false by default
/>

如果您同时想要选择复选框和single row selection，您可能需要自己控制选择状态并在选择模型更改时删除除最新选择之外的所有内容：

const [selectionModel, setSelectionModel] = React.useState<GridRowId[]>([]);

return (
  <div style={{ height: 400, width: '100%' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={5}
      checkboxSelection
      selectionModel={selectionModel}
      hideFooterSelectedRowCount
      onSelectionModelChange={(selection) => {
        if (selection.length > 1) {
          const selectionSet = new Set(selectionModel);
          const result = selection.filter((s) => !selectionSet.has(s));

          setSelectionModel(result);
        } else {
          setSelectionModel(selection);
        }
      }}
    />
  </div>
);

现场演示

V5

V4

MUI - 在 DataGrid 中禁用多行选择

MUI - Disable multiple row selection in DataGrid

checkbox

datagrid

reactjs

material-ui

现场演示