vuetify/v-data-tableの小計、合計

groupのslotを使って、小計をして、body.appendを使って、全体の合計をやります。

具体的に、以下のslotです。

• グループヘッダー：group.header
• グループ小計：group.summary
• 合計：body.append

サンプル：

<v-data-table
    :headers="headers"
    :items="items"
    group-by="groupCol"
>
  <!--グループヘッダー-->
  <template v-slot:group.header="{ group, headers }">
    <td>グループ：{{ group }}</td>
    <td :colspan="headers.length-1"></td>
  </template>

  <!--グループ小計-->
  <template v-slot:group.summary="{ group }">
    <td>グループ：{{ group }}の小計</td>
    <td>小計の値1</td>
  </template>

  <!--合計-->
  <template slot="body.append">
    <tr>
      <td>合計</td>
      <td>合計の値1</td>
    </tr>
  <template>
</v-data-table>

説明：

• groupColはgroupの列です。
• 合計を実装するにはfooterを使う手もありますが、footerは改ページなど、テーブルのbody（データの部分）の下にあるので、自分の場合、bodyの最後に追加した行で合計をやりたいです。
• 小計の値と合計の値は関数で実装します。