如何使用Reactjs将包含数组集合的对象内容在表格中按列展示

核心思路 #

• 提取所有日期作为表格列标题
• 计算所有日期数组的最大长度，作为表格的总行数（保证最长的列数据能完整展示）
• 逐行渲染：每一行遍历所有列，判断当前列的数组在当前行索引下是否存在数据，存在则展示员工名称，否则留空

完整实现代码 #

import React from 'react';

// 示例源数据
const result = {
  sunday: [{id:1,name:"emp1"}],
  monday: [{id:1,name:"emp1"},{id:2,name:"emp2"}],
  tuesday: [{id:1,name:"emp1"},{id:3,name:"emp3"},{id:4,name:"emp4"}],
  wednesday: [{id:1,name:"emp1"}],
  thursday: [{id:1,name:"emp1"},{id:4,name:"emp4"}],
  saturday: [{id:5,name:"emp5"}],
  friday: [{id:7,name:"emp7"},{id:1,name:"emp1"},{id:4,name:"emp4"}],
};

const WeekEmpTable = () => {
  // 1. 提取列头（所有星期字段），如果需要自定义表头顺序可以手动写数组指定
  const columns = Object.keys(result);
  // 2. 计算最大行数，取所有员工数组长度的最大值
  const maxRowCount = Math.max(...Object.values(result).map(arr => arr.length));

  return (
    <table border={1} cellPadding={8} cellSpacing={0}>
      {/* 表头 */}
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col}>{col}</th>
          ))}
        </tr>
      </thead>
      {/* 表体 */}
      <tbody>
        {/* 循环生成每一行 */}
        {Array.from({length: maxRowCount}).map((_, rowIndex) => (
          <tr key={rowIndex}>
            {/* 循环每一列，取当前行对应位置的员工数据 */}
            {columns.map(col => {
              const emp = result[col][rowIndex];
              return <td key={col}>{emp ? emp.name : ''}</td>
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default WeekEmpTable;

自定义说明 #

如果需要调整表头的顺序，不用从对象自动取key，直接手动定义columns数组即可，比如要按周一到周日排序就写：
const columns = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday']
表格的边框、间距等样式可以根据需求自行修改CSS。

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