如何在Material UI的DenseTable简易表格中处理行点击获取整行数据

实现方案 #

仅需在原有代码基础上做少量修改，无需引入额外复杂组件即可实现需求：

1. 给组件添加状态存储点击后获取的行数据
2. 为TableRow绑定点击事件，将当前遍历的行数据传入状态

修改后完整代码 #

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function DenseTable() {
  // 新增：存储选中的行数据
  const [selectedRow, setSelectedRow] = React.useState(null);

  // 可选：测试用，点击后打印行数据到控制台
  React.useEffect(() => {
    if (selectedRow) {
      console.log('当前点击行的全部数据：', selectedRow);
    }
  }, [selectedRow])

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              // 新增：点击事件+可点击样式+hover效果
              onClick={() => setSelectedRow(row)}
              sx={{ 
                '&:last-child td, &:last-child th': { border: 0 },
                cursor: 'pointer',
                '&:hover': { backgroundColor: 'action.hover' }
              }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

补充说明 #

点击任意行后，selectedRow状态会同步更新为当前行的完整数据，你可以直接基于该状态做后续业务逻辑处理，比如弹窗展示、表单填充、接口提交等。

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