Vuetify 2.xのv-data-tableでグローバルなindexを取得する方法

Vuetify 2 系の v-data-table で行毎に何項目目かを表示するのに slot 変数である index を使ってみたところ、
ページ毎に 0 始まりになっていた。例えば、ページ枚の項目数が 10 で 2 ページ目であれば index が 10 を想定していたが、0 となっていた。

<v-data-table
  :headers="headers"
  :items="desserts"
  item-key="name"
  :items-per-page.sync="itemsPerPage"
  :page.sync="page"
>
  <template v-slot:[`item`]="{index, item}">
    <tr>
      <td>{{index}}</td>
      <td>{{item.name}}</td>
    </tr>
  </template>
</v-data-table>

これを解決するのに一番シンプルな方法はページ毎の項目数と現在のページ数からオフセットを計算し index に足し込むというもの。

<v-data-table
  :headers="headers"
  :items="desserts"
  item-key="name"
  :items-per-page.sync="itemsPerPage"
  :page.sync="page"
>
  <template v-slot:[`item`]="{index, item}">
    <tr>
      <td>{{index + itemsPerPage*(page-1)}}</td>
      <td>{{item.name}}</td>
    </tr>
  </template>
</v-data-table>

index を複数箇所で使う場合は毎回 offset 足し込むのも不便なので methods にグローバルな index を算出する method を定義してもいいかも。

    getGlobalIndex(index) {
      return index + this.itemsPerPage * (this.page-1)
    }

あるいは、v-data-table を vue の extends オプション使ってカスタマイズし、index をグローバルなもので書き換えるようにしてもよさそう。参考