如何在Vue中用v-for遍历多层数组并按日期匹配渲染员工表格

前置数据结构参考 #

基于你描述的reduce处理后的嵌套结构，给出参考结构方便对齐逻辑：

// 员工列表数据，已按「员工-日期-作业」分层
const employeeList = [
  {
    empId: 1,
    empName: '张三',
    dateJobs: { // 键为日期字符串，值为当日作业列表
      '2024-05-01': [
        { area: 'A区', jobNo: 'X001', workHours: 8 },
        { area: 'A区', jobNo: 'X002', workHours: 2 }
      ],
      '2024-05-03': [
        { area: 'B区', jobNo: 'Y001', workHours: 7 }
      ]
    }
  },
  // 更多员工...
]
// 已排序的日期表头数组
const dateHeaders = ['2024-05-01', '2024-05-02', '2024-05-03']

模板v-for循环代码 #

<template>
  <table border="1" style="border-collapse: collapse; width: 100%;">
    <thead>
      <tr>
        <th>员工姓名</th>
        <!-- 遍历排序后的日期生成表头 -->
        <th v-for="date in dateHeaders" :key="date">{{ date }}</th>
      </tr>
    </thead>
    <tbody>
      <!-- 第一层遍历：遍历所有员工生成行 -->
      <tr v-for="emp in employeeList" :key="emp.empId">
        <td>{{ emp.empName }}</td>
        <!-- 第二层遍历：始终和表头的日期数组对齐，保证单元格和表头一一对应 -->
        <td v-for="date in dateHeaders" :key="`${emp.empId}-${date}`">
          <!-- 匹配到当日作业数据时，遍历作业列表展示字段 -->
          <div v-if="emp.dateJobs?.[date]?.length">
            <div 
              v-for="(job, index) in emp.dateJobs[date]" 
              :key="`${emp.empId}-${date}-${index}`"
              style="margin-bottom: 6px; padding: 2px;"
            >
              区域：{{ job.area }} / 作业编号：{{ job.jobNo }} / 工时：{{ job.workHours }}h
            </div>
          </div>
          <!-- 无匹配数据时展示占位 -->
          <span v-else style="color: #ccc;">-</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

核心实现要点 #

• 单元格循环完全和dateHeaders表头数组绑定，不需要遍历员工自身的日期key，避免出现日期顺序错乱、缺漏的问题
• 直接用当前遍历的表头日期作为key，去员工的作业数据中匹配对应日期的作业列表，自动完成数据和单元格的对齐
• 作业层级的循环仅在当前日期有作业数据时执行，无数据时显示空占位即可
• 所有v-for绑定唯一key，避免Vue渲染异常
• 若你的预处理数据结构和参考不同，仅需调整emp.dateJobs[date]的取值路径为你实际的作业列表路径即可

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