Material UI - 禁用 DataGrid 中的多行选择

Question

我想阻止 Material UIDataGrid多个复选框部分。当我选择复选框部分时，应选择特定行，而其他行保持未选中状态。我尝试了该disableMultipleSelection选项，但它不起作用。

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

Answer 1

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

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

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

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