vuetify.js - v-data-table で vue2-perfect-scrollbar を使用して、固定ヘッダー v-data-table のスクロールバーを完璧にする方法は?

Question

スクロールバーをより美しくするために vuetify の v-data-table に完璧なスクロールバーを設定したいですか?

v-data-table で vue2-perfect-scrollbar を使用して、固定ヘッダー v-data-table のスクロールバーを完璧にする方法は?

<template>
  <div style="width:400px;height:400px">
    <v-data-table
      class="table"
      dense
      fixed-header
      width="100%"
      height="100%"
      :dark="dark"
      :headers="headers"
      :items="items"
    >
      <template v-slot:item="{ item }">
        <PerfectScrollbar>
          <tr>
            <template v-for="(header, index) in headers">
              <td>
                <v-responsive :min-width="getTdMinWidth(header)">
                  <div
                    :class="{
                      'long-text': isTdTextTooLong(item[header.value])
                    }"
                  >
                    {{ item[header.value] }}
                  </div>
                </v-responsive>
              </td>
            </template>
          </tr>
        </PerfectScrollbar>
      </template>
    </v-data-table>
  </div>
</template>