如何在MUI DataGrid复选框选择中显示已选中数据

要实现加载时默认选中指定行（比如用户有权限的Server A、C、D），只需利用MUI DataGrid的rowSelectionModel受控属性即可，具体操作如下：

1. 筛选默认选中的行ID
   从你的rows数据源中，筛选出对应Server A、C、D的行ID组成数组。如果权限数据来自接口，直接用接口返回的权限列表匹配行ID即可。

2. 用状态管理选中状态
   借助useState初始化选中ID数组，将其绑定到DataGrid的rowSelectionModel属性上，组件加载时就会自动选中这些ID对应的行。

3. 同步更新选中数据
   在onRowSelectionModelChange回调中，同时更新选中ID状态和你需要的selectedRows数组，保证状态同步。

修改后的完整代码示例：

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

const YourComponent = () => {
  // 假设rows是你的数据源，结构类似[{ id: 1, name: 'Server A' }, ...]
  // 筛选出需要默认选中的行ID
  const defaultSelectedIds = rows.filter(row => 
    ['Server A', 'Server C', 'Server D'].includes(row.name)
  ).map(row => row.id);

  // 管理选中的ID数组和选中行的name数组
  const [rowSelectionModel, setRowSelectionModel] = useState(defaultSelectedIds);
  const [selectedRows, setSelectedRows] = useState(
    defaultSelectedIds.map(id => rows.find(row => row.id === id).name)
  );

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      autoPageSize
      disableColumnMenu
      paginationModel={{ page: 0, pageSize: 15 }}
      checkboxSelection
      // 绑定受控选中模型，实现默认选中
      rowSelectionModel={rowSelectionModel}
      onRowSelectionModelChange={(ids) => {
        // 更新选中ID状态
        setRowSelectionModel(ids);
        // 生成选中行的name数组
        const selectedIDs = new Set(ids);
        const selectedRowsData = rows.filter(row => selectedIDs.has(row.id));
        setSelectedRows(selectedRowsData.map(rowdata => rowdata.name));
      }}
    />
  );
};

export default YourComponent;

关键说明 #

• rowSelectionModel：这是DataGrid的受控属性，传入的数组即为当前选中的行ID集合，组件会根据这个数组渲染选中状态。
• 初始化selectedRows：页面加载时就根据默认选中ID生成对应的name数组，避免初始状态为空的情况。
• 若权限数据是异步获取的（比如接口请求），只需在接口返回后再初始化defaultSelectedIds及对应状态即可。

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