Question

我试图创建一个像这样的表： table that I want

但是当我按照本教程https://codesandbox.io/s/material-ui-table-demo-with-row-span-dq1w6?file=/demo.js并以多种方式尝试时，结果只是不正确。

这是我的结果：https://codesandbox.io/s/material-ui-table-demo-with-row-span-1hhvv?file=/demo.js

感谢您的帮助

Answer 1

该解决方案需要整理，但是概念在那里。

这里的窍门是让第一列的rowspan等于最后一列的行数。为此，您必须累积每个details中所有datas的长度。

这是一个可行的示例：

export default function SpanningTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>ROOT</TableCell>
            <TableCell>DATA</TableCell>
            <TableCell>DETAIL</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sample.map(root => (
            <Fragment>
              <TableRow>
                <TableCell rowSpan={root.datas.reduce((length, data) => length + data.details.length + 1, 0) + 1}>
                  {root.name}
                </TableCell>
              </TableRow>
              {root.datas.map(data => (
                <Fragment>
                  <TableRow  >
                    <TableCell rowSpan={data.details.length + 1}>{data.name}</TableCell>
                  </TableRow>
                  {data.details.map(detail => (
                      <TableRow>
                        <TableCell>{detail.name}</TableCell>
                      </TableRow>
                  ))}
                </Fragment>
              ))}
            </Fragment>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

有没有办法在React中创建嵌套数据表？

1 个答案: