【Material-UI】Table组件中的 Spanning Table 功能详解_material ui table 列头分组-CSDN博客

本文链接：https://blog.csdn.net/lph159/article/details/141869887

文章目录

Material-UI 是一个基于 React 的流行 UI 库，提供了许多预构建的组件，帮助开发者快速构建优雅的用户界面。在众多组件中，Table 组件是用于展示结构化数据的利器。本文将详细介绍 Table 组件中的 Spanning Table 功能，帮助你在项目中更好地利用这一特性。

一、Spanning Table 概述

1. 功能介绍

Spanning Table 是 Material-UI Table 组件的一种特殊布局形式，允许表格中的某些单元格跨越多行或多列。这个功能在展示复杂的数据结构时非常有用，尤其是在财务报表、发票等场景中。通过跨行和跨列，Spanning Table 能够有效地减少冗余信息，让数据展示更为简洁明了。

2. 适用场景

Spanning Table 适用于需要汇总或分组数据的场景。例如，显示商品清单时，可能需要在底部添加小计、税金和总金额；或者在某些情况下，一个类别可能包含多个子项，类别名称可以通过跨行显示在表格的左侧，而不必为每个子项重复输入类别名称。

二、Spanning Table 的基本用法

在 Material-UI 中创建 Spanning Table 的过程相对简单，只需要使用 colSpan 和 rowSpan 属性即可。这些属性可以指定某个单元格应跨越的行数或列数。

以下是一个基本的 Spanning Table 实现示例：

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';

const TAX_RATE = 0.07;

function ccyFormat(num) {
  return `${num.toFixed(2)}`;
}

function priceRow(qty, unit) {
  return qty * unit;
}

function createRow(desc, qty, unit) {
  const price = priceRow(qty, unit);
  return { desc, qty, unit, price };
}

function subtotal(items) {
  return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
}

const rows = [
  createRow('Paperclips (Box)', 100, 1.15),
  createRow('Paper (Case)', 10, 45.99),
  createRow('Waste Basket', 2, 17.99),
];

const invoiceSubtotal = subtotal(rows);
const invoiceTaxes = TAX_RATE * invoiceSubtotal;
const invoiceTotal = invoiceTaxes + invoiceSubtotal;

export default function SpanningTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 700 }} aria-label="spanning table">
        <TableHead>
          <TableRow>
            <TableCell align="center" colSpan={3}>
              Details
            </TableCell>
            <TableCell align="right">Price</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Desc</TableCell>
            <TableCell align="right">Qty.</TableCell>
            <TableCell align="right">Unit</TableCell>
            <TableCell align="right">Sum</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.desc}>
              <TableCell>{row.desc}</TableCell>
              <TableCell align="right">{row.qty}</TableCell>
              <TableCell align="right">{row.unit}</TableCell>
              <TableCell align="right">{ccyFormat(row.price)}</TableCell>
            </TableRow>
          ))}
          <TableRow>
            <TableCell rowSpan={3} />
            <TableCell colSpan={2}>Subtotal</TableCell>
            <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Tax</TableCell>
            <TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
            <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell colSpan={2}>Total</TableCell>
            <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

在这个示例中，我们展示了一个简单的发票表格。表格包括商品清单、小计、税金和总金额。在这里，小计、税金和总金额通过跨列的方式（colSpan）展示在表格的底部。

三、Spanning Table 详解

1. `colSpan` 和 `rowSpan` 的使用

colSpan：这个属性用于让某个单元格跨越多列。通过设置 colSpan，可以让表格在水平方向上合并多个单元格，适合在需要显示汇总数据时使用。例如，在发票表格中，小计、税金和总金额行通常会跨越商品描述、数量和单价列，以便在总计列显示合并后的数据。
rowSpan：这个属性用于让某个单元格跨越多行。rowSpan 常用于垂直方向上合并单元格，例如在展示分组数据时可以合并组标题，以避免重复展示。