【Vue.js】Vuetifyのv-data-tableのフッタ－に選択数を無理矢理表示する

概要

以下、Vue.jsのUIライブラリであるVuetifyの話です。
v-data-tableのフッターにテーブルで選択している選択数を表示したかったときのメモです。
力技での暫定対応に近く正常に表示できない可能性がありますので参考程度でお願いします。

方法

<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
  >
    <template v-slot:top>
      <v-switch
        v-model="singleSelect"
        label="Single select"
        class="pa-3"
      ></v-switch>
    </template>
  </v-data-table>
  <div class="table-footer-prepend d-flex pl-2 align-center">
    選択：{{selected.length}}
  </div>
</template>

<script>
.table-footer-prepend {
  margin-top: -58px;
  height: 58px;
  color:black;
}
</script>

v-data-tableのコードは公式のRow selectionのサンプルです。

<div>でつけたclassの.table-footer-prependに対してcssを効かせテーブルのv-data-footerにあたる部分に被せて表示しています。
各々の開発デザインによってv-data-footerの高さに応じてcss側の数値を変える、ユーザの表示する環境、画面のリサイズ等でずれる可能性を否定できない力技です。
v-data-footerのslot等でスマートにできると思っていたのですが、パッと見できなさそうだったのでごり押ししました。