Vue，根据日期设置表格数据行

Question

我的 vue 应用程序目前正在迭代一个包含小时数和滑动次数的员工数据对象，该数据对象每天都在为每个员工成倍增加。

这是在计算新的数据行，所以我每天都有给定的数据。

但是，在我的模板中，我试图将多重数据设置为显示在具有相应日期的列中，并为每个员工只提供一行。我的预期结果是

Employee  |  2021-08-31  |  2021-09-01  |  2021-09-02
-----------------------------------------------------
Evan        60                60
Stan        100               200
Kelly       60                             164

我如何修改我正在做的事情，以便最终每个员工只有一行，并根据列标题日期和该记录对象中的日期将数据放入正确的列？

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Employee</th>
        <th>2021-08-31</th>
        <th>2021-09-01</th>
        <th>2021-09-02</th>
        <th>Grand Total</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in compRows">
        <td v-html="row.employee"></td>
        <td v-if="row.workDate == {{$date->addDay()->format($format)}}"></td>
        <td v-html="row.hours"></td>
      </tr>
    </tbody>
  </table>
</div>


@endsection

@section('loadjs')

<script>

new Vue({
  el: "#app",
  data: {
    rows: [
        {  
            employee: "Evan",
            hours: "15",
            workDate: "2021-08-31",
            swipes: "4",
            
        },
        {  
            employee: "Kelly",
            hours: "15",
            workDate: "2021-08-31",
            swipes: "4",
            
        },
        {  
            employee: "Evan",
            hours: "15",
            workDate: "2021-09-01",
            swipes: "4",
           
        },
        {  
            employee: "Stan",
            hours: "25",
            workDate: "2021-08-31",
            swipes: "4",
            
        },
        {  
            employee: "Kelly",
            hours: "82",
            workDate: "2021-09-02",
            swipes: "2",
            
        },
        {  
            employee: "Stan",
            hours: "40",
            workDate: "2021-09-01",
            swipes: "5",
           
        }
    ]
  },
  methods: {

  },
  computed: {
    compRows() {
      const grouped = this.rows.reduce((r, o) => {
        r[o.employee] ??= {};
        r[o.employee][o.workDate] ??= {employee: o.employee, workDate: o.workDate, swipes: 0, hours: 0};
        r[o.employee][o.workDate].swipes += +o.swipes;
        r[o.employee][o.workDate].hours += +o.hours;
        return r;
      }, {});
      return Object.values(grouped).map(o => Object.values(o)).flat();
    }
  }
});


</script>

Answer 1

1. 不要将compRows 属性（下面重命名为hoursByEmployee）中的分组数据展平，而是将其保留为对象，以便以后按日期查找员工工时。此外，跟踪存储总计（按小时滑动）的 total 属性。

   export default {
     computed: {
       hoursByEmployee() {
         return this.rows.reduce((r, o) => {
           r[o.employee] ??= {}
           r[o.employee][o.workDate] ??= {swipes: 0, hours: 0}
           r[o.employee][o.workDate].swipes += +o.swipes
           r[o.employee][o.workDate].hours += +o.hours
           r[o.employee].total ??= 0 ?
           r[o.employee].total += (+o.swipes * +o.hours) ?
           return r
         }, {})
       },
     }
   }
   

2. 使用另一个计算属性从行的workDate 中获取可用日期，按时间顺序排序：

   export default {
     computed: {
       dates() {
         const dates = [...new Set(this.rows.map(r => r.workDate))]
         return dates.sort((a,b) => new Date(a) - new Date(b))
       },
     }
   }
   

3. 在模板的表头中，渲染计算出来的dates：

   <thead>
     <tr>
       <th>Employee</th>
       <th v-for="date in dates" :key="date">{{ date }}</th> ?
       <th>Grand Total</th>
     </tr>
   </thead>
   

4. 在模板的表体中，使用上面创建的hoursByEmployee 查找和dates 按日期呈现计算的员工工时。如果该日期存在小时数，则呈现每日总计。另外，在最后一列渲染大的total 属性。

   <tbody>
     <tr v-for="(hours, employee) in hoursByEmployee" :key="employee">
       <td>{{ employee }}</td>
       <td v-for="date in dates" :key="date">{{ hours[date] && hours[date].swipes * hours[date].hours }}</td> ?
       <td>{{ hours.total }}</td> ?
     </tr>
   </tbody>
   

demo