禁用数据网格视图中的行选择

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 100 },
];

const rows = [
  { id: 1, name: 'Alice', age: 35 },
  { id: 2, name: 'Bob', age: 42 },
  { id: 3, name: 'Charlie', age: 28 },
];

export default function DataGridDemo() {
  const [selectionModel, setSelectionModel] = useState([]);

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        disableSelectionOnClick
        selectionModel={selectionModel}
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection);
        }}
      />
    </div>
  );
}

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 100 },
];

const rows = [
  { id: 1, name: 'Alice', age: 35 },
  { id: 2, name: 'Bob', age: 42 },
  { id: 3, name: 'Charlie', age: 28 },
];

export default function DataGridDemo() {
  const [selectionModel, setSelectionModel] = useState([]);

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        disableSelectionOnClick
        selectionModel={selectionModel}
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection);
        }}
        getRowClassName={(params) => {
          return params.row.id === 2 ? 'disable-selection' : '';
        }}
        classes={{
          'disable-selection': 'disable-selection',
        }}
      />
    </div>
  );
}