如何检测material-ui data-grid表头全选复选框的点击事件？

监听全选操作时机 #

直接使用DataGrid内置的onSelectionModelChange事件即可捕获全选操作，事件回调的第二个参数details携带了操作类型标识：

<DataGrid
  checkboxSelection
  onSelectionModelChange={(newSelectionModel, details) => {
    // details.isSelectAll 为true时代表本次操作由点击表头全选复选框触发
    if (details.isSelectAll) {
      // 此处写入自定义的选中/取消全选逻辑
      console.log('全选操作触发，当前选中项ID集合：', newSelectionModel)
    }
  }}
  {/* 其余组件配置 */}
/>

无需自行对比选中项数量和总数据量判断是否为全选操作，isSelectAll标识的准确性更高，也会兼容半选状态的变更场景。

获取全选复选框激活状态 #

有两种常用实现方式：

• 调用API主动查询：通过DataGrid暴露的apiRef实例调用内置方法直接获取状态

  import { useGridApiRef, DataGrid } from '@mui/x-data-grid';
  
  function CustomGrid() {
    const gridApiRef = useGridApiRef();
  
    // 任意时机调用即可获取当前全选状态
    const getSelectAllState = () => {
      const isAllActivated = gridApiRef.current.isAllSelected();
      return isAllActivated;
    }
  
    return (
      <DataGrid
        apiRef={gridApiRef}
        checkboxSelection
        rows={rows}
        columns={columns}
      />
    )
  }
  

• 受控模式直接计算：如果你的表格使用受控的selectionModel属性，直接对比选中项长度和总数据量即可得到全选状态

  const [selectionModel, setSelectionModel] = useState([]);
  // isAllSelected 即为全选复选框的激活状态
  const isAllSelected = selectionModel.length === rows.length;
  

分页场景下默认全选仅作用于当前页，如需实现跨页全选，需要额外配置disableRowSelectionOnPageChange属性，同时自行维护跨页选中数据的逻辑。

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