material-ui table 合并单元格

### 如何在 Material-UI 表格中合并单元格

为了实现 Material-UI 中表格的单元格合并功能，可以利用 `colSpan` 和 `rowSpan` 属性来控制列和行的跨越数量。下面是一个简单的例子展示如何在一个基于 Material-UI 的项目里完成此操作。

import React from 'react';
import { Table, TableBody, TableCell, TableRow } from '@mui/material';

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

const rows = [
  createData('Frozen yoghurt', 159, 6.0),
  createData('Ice cream sandwich', 237, 9.0),
];

export default function SpanningTable() {
  return (
    <Table>
      <TableBody>
        <TableRow>
          <TableCell rowSpan={2}>Dessert (100g serving)</TableCell>
          <TableCell colSpan={2} align="right">Numeric value</TableCell>
        </TableRow>
        <TableRow>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat&nbsp;(g)</TableCell>
        </TableRow>
        {rows.map((row) => (
          <TableRow key={row.name}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

上述代码片段展示了通过设置 `rowSpan` 和 `colSpan` 来让特定的 `<TableCell>` 跨越多行或多列[^1]。