如何获取MUI Table中复选框选中的所有行数据

从你的代码片段能看出，当前selected状态存储的是选中行的name字段值。要获取选中项的完整数据，只需基于这个selected数组过滤原数据即可，具体步骤如下：

1. 获取完整选中行数据 #

直接用原rows数组过滤，筛选出name在selected数组中的所有行：

// 获取所有选中的完整行数据
const selectedRows = rows.filter(row => selected.includes(row.name));

2. 确保全选/取消全选逻辑正确 #

检查你的handleSelectAllClick实现，要保证全选时能把所有可见行的name存入selected，取消全选时清空数组：

const handleSelectAllClick = (event) => {
  if (event.target.checked) {
    // 全选时取可见行的name集合
    const newSelected = visibleRows.map(row => row.name);
    setSelected(newSelected);
    return;
  }
  setSelected([]);
};

3. 确保单个复选框点击逻辑正确 #

检查handleClick函数，保证点击单个复选框时能正确添加/移除选中项：

const handleClick = (event, name) => {
  event.stopPropagation(); // 避免触发TableRow的点击事件
  const selectedIndex = selected.indexOf(name);
  let newSelected = [...selected];

  if (selectedIndex === -1) {
    newSelected.push(name);
  } else {
    newSelected.splice(selectedIndex, 1);
  }
  
  setSelected(newSelected);
};

4. 使用选中数据 #

之后你可以在任意需要的地方使用selectedRows，比如提交表单、批量操作等：

// 示例：处理选中项
const handleBatchOperation = () => {
  console.log("选中的完整行数据：", selectedRows);
  // 这里写你的批量操作逻辑
};

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