嵌套表或第一行是动态表中的摘要行

Question

我需要使用来自API的数据在Vuetify / Vue中创建一个动态表。我还不知道数据的确切格式。但是，这里显示的是我需要如何显示输出。注意：这些值不必显示为文本框。每张发票的第一行是摘要行。接下来的几行是详细信息。摘要信息主要在左侧列中，详细信息在右侧。

是否可以使用分组或行跨度功能？我在想我可能无法使用Vuetify表组件，而是使用嵌套模板动态构建表。

这是基本的HTML：

<table border=1>
 <tr>
  <td>
  Vendor
  </td>
  <td>
  Vendor Name
  </td>
  <td>
  PO Number
  </td>
  <td>
  Invoice Number
  </td>
  <td>
  Invoice Date
  </td>
  <td>
  Part #
  </td>
  <td>
  Part Description
  </td>
  <td>
  Qty Rec
  </td>
  <td>
  Each
  </td>
  <td>
  Sec. Total
  </td>
  <td>
  Invoice Total
  </td>
  <td>
  Approved
  </td>
 </tr>
 <tr>
  <td width=60 rowspan=4 valign=top>
  x
  </td>
  <td width=144 rowspan=4 valign=top>
  x
  </td>
  <td width=84 rowspan=4 valign=top>
  x
  </td>
  <td width=102 rowspan=4 valign=top>
  x
  </td>
  <td width=90 rowspan=4 valign=top>
  x
  </td>
  <td width=600 colspan=5 valign=top>
  &nbsp;
  </td>
  <td width=106 valign=top>
  x
  </td>
  <td width=68 align="center" valign=top>
  x
  </td>
 </tr>
 <tr>
  <td width=96 valign=top>
  x
  </td>
  <td width=234 valign=top>
  x
  </td>
  <td width=78 valign=top>
  x
  </td>
  <td width=90 valign=top>
  x
  </td>
  <td width=102 valign=top>
  x
  </td>
  <td width=106 valign=top>
  Comments
  </td>
  <td width=68 valign=top>
  &nbsp;
  </td>
 </tr>
 <tr>
  <td width=96 valign=top>
  x
  </td>
  <td width=234 valign=top>
  x
  </td>
  <td width=78 valign=top>
  x
  </td>
  <td width=90 valign=top>
  x
  </td>
  <td width=102 valign=top>
  x
  </td>
  <td width=106 valign=top>
  Comments
  </td>
  <td width=68 valign=top>
  &nbsp;
  </td>
 </tr>
 <tr>
  <td width=96 valign=top>
  x
  </td>
  <td width=234 valign=top>
  x
  </td>
  <td width=78 valign=top>
  x
  </td>
  <td width=90 valign=top>
  x
  </td>
  <td width=102 valign=top>
  x
  </td>
  <td width=106 valign=top>
  Comments
  </td>
  <td width=68 valign=top>
  &nbsp;
  </td>
 </tr>
 <tr>
  <td colspan=12>
  &nbsp;
  </td>
 </tr>
</table>