MUI X Data Grid v4如何实现复选框多选、点击行仅单选功能

实现逻辑 #

核心是通过受控模式管理选中项，根据选择操作的触发源区分交互逻辑：

• 触发源为复选框时：保留默认多选能力
• 触发源为行点击时：仅保留当前点击行的选中状态，清空其他选中项

核心代码实现 #

首先使用受控模式绑定selectionModel，监听onSelectionModelChange事件判断触发原因：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function CustomSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });
  // 受控模式管理选中项
  const [selectionModel, setSelectionModel] = React.useState([]);

  const handleSelectionChange = (newModel, details) => {
    // 判断操作触发源
    if (details.reason === 'checkboxToggle' || details.reason === 'selectAllCheckbox') {
      // 复选框操作：直接更新多选结果
      setSelectionModel(newModel);
    } else if (details.reason === 'rowClick') {
      // 行点击操作：仅保留最新点击的行
      const clickedRowId = details.row.id;
      setSelectionModel([clickedRowId]);
    }
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        checkboxSelection
        selectionModel={selectionModel}
        onSelectionModelChange={handleSelectionChange}
      />
    </div>
  );
}

注意事项 #

• 如果你使用的是DataGridPro组件，上述逻辑完全兼容，只需将DataGrid替换为DataGridPro即可
• 该实现完全符合需求：复选框支持多选、全选；直接点击任意行时仅选中当前行，自动清空之前的所有选中状态

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