React + material-ui 表格指定位置合并

React + material-ui 表格指定位置合并。

基于React基础 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";

export default function User() {
  // 标头
  const [column] = React.useState([
    {
      id: "id",
      label: "序号",
      minWidth: 170,
      align: "center",
      // flag 需要指定要合并的列
      flag: false,
    },
    {
      id: "name",
      label: "姓名",
      minWidth: 170,
      align: "center",
      flag: true,
    },
    {
      id: "age",
      label: "年龄",
      minWidth: 170,
      align: "center",
      flag: false,
    },
    {
      id: "height",
      label: "身高",
      minWidth: 170,
      align: "center",
      flag: true,
    },
  ]);
  // 原数据
  const [rows] = React.useState([
    {
      id: "0",
      name: "孙悟空",
      age: 18,
      height: 170,
    },
    {
      id: "1",
      name: "关云长",
      age: 19,
      height: 172,
    },
    {
      id: "2",
      name: "诸葛亮",
      age: 20,
      height: 170,
    },
    {
      id: "3",
      name: "张飞",
      age: 25,
      height: 178,
    },
    {
      id: "4",
      name: "赵云",
      age: 45,
      height: 179,
    },
    {
      id: "5",
      name: "马超",
      age: 28,
      height: 168,
    },
  ]);
  const [rowsList, setRowsList] = React.useState([]);
  // 需要合并的行范围
  const [mergeList] = React.useState([
    {
      startRow: 1,
      endRow: 3,
    },
  ]);
  function handleClick() {
    let newList: any[] = [];
    // 给要合并的数组对象，添加两个属性。显示隐藏，合并初始行（1不合并）
    rows.forEach((v, i) => {
      newList.push(Object.assign({}, v, { disable: "", merge: 1 }));
    });
    // 如果是空的那就不合并
    if (mergeList.length > 0) {
      mergeList.forEach((v: any) => {
        // 取出需要合并的行位置
        let start = v.startRow;
        let end = v.endRow;
        newList.forEach((j, i) => {
          // 判断要合并的行数
          if (i === start) {
            j.merge = end - start + 1;
          }
          // 在后续范围内隐藏元素，第一个不能隐藏
          if (i > start && i <= end) {
            j.disable = "none";
          }
        });
      });
    }
    setRowsList(newList as any);
  }

  return (
    <div>
      <div style={{ textAlign: "right" }}>
        <button onClick={handleClick} style={{ padding: "10px" }}>
          点击合并
        </button>
      </div>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 700 }} aria-label="spanning table">
          <TableHead>
            <TableRow>
              {column.map((column) => (
                <TableCell
                  key={column.id}
                  align={(column as any).align}
                  style={{ top: 57, minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsList.map((row: any) => (
              <TableRow key={row.id}>
                {column.map((v) => {
                  const value = row[v.id];
                  return v.flag ? (
                    <TableCell
                      key={v.id}
                      align={(v as any).align}
                      rowSpan={row.merge}
                      style={{ display: row.disable }}
                    >
                      {value}
                    </TableCell>
                  ) : (
                    <TableCell key={v.id} align={(v as any).align}>
                      {value}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}