如何在MUI DataGrid中根据行值禁用复选框选择？

在MUI v5.14.0的DataGrid中，你不需要通过componentsProps传递自定义组件来实现需求，直接使用DataGrid内置的getRowSelectionProps属性即可解决无法获取行数据的问题。这个属性可以直接拿到当前行的完整数据，进而判断是否禁用该行复选框。

具体实现代码如下：

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

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'firstName', headerName: 'First name', width: 130 },
  { field: 'lastName', headerName: 'Last name', width: 130 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

export default function DisabledCheckboxGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        getRowSelectionProps={(params) => {
          const { age } = params.row;
          // 根据age值判断是否禁用复选框
          return {
            disabled: age === null || age > 100,
          };
        }}
      />
    </div>
  );
}

核心逻辑说明 #

• getRowSelectionProps会为每一行返回选择相关的配置属性，其中disabled属性直接控制该行复选框的可选中状态。
• 通过params.row可以直接访问当前行的所有数据，轻松判断age是否满足禁用条件。
• 这种方式不需要自定义Checkbox组件，完全利用DataGrid内置API实现，简洁且符合官方设计逻辑。

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