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>
);
}