我想將父陣列及其子陣列組合在一個表中。子陣列的背景顏色應為綠色。
我做這件事有困難嗎？
請檢查我的代碼框
uj5u.com熱心網友回復：
制作一個陣列，將您的行及其子行也扁平化為單個陣列。并為 TableRow 中的兩種情況處理添加條件 fname 和 mname 渲染。
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } 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";
import { styled } from "@mui/material/styles";
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: "lightgreen"
},
[`&.${tableCellClasses.body}`]: {
backgroundColor: "lightgreen"
}
}));
const rows = [
{
id: "111",
fname: "Thomas",
mname: "James",
personnels: [
{
id: 1234,
person_id: "233",
parent_id: "111",
person: {
id: "233",
fname: "Robert",
mname: "Williams"
}
}
]
},
{
id: "222",
fname: "Jane",
mname: "Doe",
personnels: [
{
id: 4567,
person_id: "333",
parent_id: "222",
person: {
id: "333",
fname: "James",
mname: "Quincy"
}
}
]
}
];
export default function BasicTable() {
const arr=[...rows,...rows.map((e)=>e.personnels).flat()];
console.log(arr)
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Fname</TableCell>
<TableCell>Mname</TableCell>
</TableRow>
</TableHead>
<TableBody>
{arr.map((row) => (
<TableRow
key={row?.fname || row?.person?.fname}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
{row?.fname ? (
<TableCell>{row?.fname}</TableCell>
) : (
<StyledTableCell>{row?.person?.fname}</StyledTableCell>
)}
{row?.mname ? (
<TableCell align="right">{row?.mname}</TableCell>
) : (
<StyledTableCell align="right">
{row?.person?.mname}
</StyledTableCell>
)}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
代碼沙箱鏈接：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431557.html
標籤：数组 反应 ecmascript-6 材料-ui
下一篇：將ifelse結構更改為回圈