如何使用Map循环在Material UI Table中每行显示3个条目

我来帮你搞定这个表格布局改造！核心思路是把分页后的数据按每3个一组拆分，每组对应表格的一行，组内每个数据项对应一个单元格，这样就能实现一行3列的效果啦。

步骤1：添加数组分组辅助函数 #

先写个简单的工具函数，把数组分割成指定大小的子数组：

const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};

步骤2：修改TableBody的循环逻辑 #

把原来直接遍历单个数据项的逻辑，改成先分组再遍历分组：

<TableBody>
  {/* 先对分页后的数据做分组，每组3个元素 */}
  {chunkArray(this.props.data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), 3).map((rowGroup, groupIndex) => (
    <TableRow key={`row-group-${groupIndex}`}>
      {/* 遍历当前分组里的每个数据，生成单元格 */}
      {rowGroup.map(n => (
        <TableCell key={n.id}>
          {n.title}
        </TableCell>
      ))}
      {/* 可选：如果最后一组不足3个，补充空单元格让行结构对齐 */}
      {rowGroup.length < 3 && Array.from({ length: 3 - rowGroup.length }).map((_, emptyCellIndex) => (
        <TableCell key={`empty-cell-${emptyCellIndex}`} />
      ))}
    </TableRow>
  ))}
</TableBody>

逻辑说明 #

• chunkArray函数会把分页后的数组切成每3个元素一组的子数组，每个子数组对应表格的一行。
• 外层map遍历每个分组，生成<TableRow>，用groupIndex做行的唯一标识（你也可以用分组内第一个元素的id，只要保证key唯一即可）。
• 内层map遍历分组里的每个数据项，生成对应的<TableCell>。
• 可选的空单元格部分：如果最后一组数据不足3个，会自动补充空单元格，让表格每行都保持3列的结构，视觉上更整齐。

这样改造后，你的表格就能实现每行显示3个列条目的需求啦～

内容的提问来源于stack exchange，提问作者test