如何摆脱 TableBody 中的表格单元格?

Posted

技术标签:

【中文标题】如何摆脱 TableBody 中的表格单元格?【英文标题】:How to get rid of Table Cells in TableBody? 【发布时间】:2021-04-19 21:44:51 【问题描述】:

所以,我正在为从后端服务器检索的数据创建一个表。我正在使用 Material UI 中的 Table 组件。从我检索的数据中,它可能是空的或包含一个对象。我遇到的问题是,如果它是空的,我想显示Table 组件中间没有日志供用户查看。但是,因为我在TableHead 中定义了TableCell,所以单元格的数量被复制到TableBody(或者我相信)中,这阻止了我的消息居中。

这是我的组件:

export default function BasicTable() 
  const classes = useStyles();

  return (
    <TableContainer component=Paper>
      <Table className=classes.table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          rows ? (
            <div className=classes.noLogs>
              <p>No logs</p>
            </div>
          ) : (
            rows.map((row) => (
              <TableRow key=row.name>
                <TableCell component="th" scope="row">
                  row.name
                </TableCell>
                <TableCell align="right">row.calories</TableCell>
                <TableCell align="right">row.fat</TableCell>
                <TableCell align="right">row.carbs</TableCell>
                <TableCell align="right">row.protein</TableCell>
              </TableRow>
            ))
          )
        </TableBody>
      </Table>
    </TableContainer>
  );

完整代码可在CodeSandbox 获得。

如您所见,消息仅位于TableBody 的第一个单元格的中心。有没有一种方法可以仅在数据为空时删除这些单元格或通过其他方法将消息居中?

【问题讨论】:

【参考方案1】:

您可以添加一个TableRow 和一个TableCell,而不是在table 中使用divp 标签。您可以将colspan=5 添加到您的TableCell 以指示单元格扩展了多少列,如下所示:

<TableContainer component=Paper>
  <Table className=classes.table aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fat&nbsp;(g)</TableCell>
        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
        <TableCell align="right">Protein&nbsp;(g)</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      rows ? (
        <TableRow>
          <TableCell colspan=5 align="center">
            No items found
          </TableCell>
        </TableRow>
      ) : (
        rows.map((row) => (
          <TableRow key=row.name>
            <TableCell component="th" scope="row">
              row.name
            </TableCell>
            <TableCell align="right">row.calories</TableCell>
            <TableCell align="right">row.fat</TableCell>
            <TableCell align="right">row.carbs</TableCell>
            <TableCell align="right">row.protein</TableCell>
          </TableRow>
        ))
      )
    </TableBody>
  </Table>
</TableContainer>

【讨论】:

以上是关于如何摆脱 TableBody 中的表格单元格?的主要内容,如果未能解决你的问题,请参考以下文章

如何处理表格布局的每个单元格上的点击事件

重新加载表格视图后出现最后一个静态单元格分隔线

如何防止表格单元格(不是单个单元格)的列中的换行?

如何从表格视图中的单元格点击图像视图

如何根据集合视图中的单元格选择来控制表格视图的内容?

如何使excel中的单元格不可编辑