html - 表中的子行与主表列对齐

Question

我正在使用 vuetify 的数据表。我想使用扩展槽在表格中显示更多行。
例如： 蓝色行是、销售和收入总和的子行。

January 2nd

似乎expanded-item插槽v-data-table在<tr>标签内，这就是官方文档在其中使用<td>的原因。假设我的项目看起来像：

{
  month: 'January',
  day: 2,
  sells: 29,
  revenue: 428,
  byHour: [
    {hour: 7, sells: 3, revenue: 33},
    ...
  ]
}

如果我这样使用插槽：

<template v-slot:expanded-item="{ headers, item }">
  <td></td>
  <td>item.byHour[0].hour</td>
  <td>item.byHour[0].sells</td>
  <td>item.byHour[0].revenue</td>
</template>

看起来不错。子行的内容与主表的列对齐，
但我想使用v-for，我尝试将上面的代码包装在<tr>or<table>但它不使用整个槽宽度或子行的列不是与主行和表对齐。

我怎样才能实现我的目标？

谢谢。