v-resizeを使ってv-data-tableの高さを自動調整

全体のレイアウトはこのように、HeaderとTable二つ部分があります。Headerの部分には、表示条件によって、高さは変わります。さらに、Responsiveにもするので、縦と横表示したら、高さも変わります。

実現したいこと：Headerの高さが変わっても、Table部分は残りのスペースを全部埋めてくれたらよいです。

高さ自動調整のレイアウトを作成

<template>
  <div v-resize="onResize">
    <slot name="header" />
    <div ref="tableContainer">
      <slot name="table" :table-height="tableHeight" />
    </div>
  </div>
</template>

<script>
export default {
  name: "MyLayout",
  data() {
    ...
    tableHeight: 0,
  },
  methods: {
    onResize() {	
      // 59はv-data-tableのfooterのデフォルト高さ
      this.tableHeight = window.innerHeight - this.$refs.tableContainer.getBoundingClientRect().y - 59;
    },
  },
};
</script>

ポイントは二つ：
１．テーブルの高さをdataにして、propsとして、親から子に渡す。
２．親のほうで、v-resizeを利用して、テーブルの高さを再計算します。

レイアウトにv-data-tableを入れる

<template>
  <v-app>
    <v-main>
      <my-layout>
        <template v-slot:header>
          <h1 class="text-center">Header</h1>
        </template>
        <template v-slot:table="tableProps">
          <v-data-table
            :height="tableProps.tableHeight"
            ...
          >
          </v-data-table>
        </template>
      </my-layout>
    </v-main>
  </v-app>

あとは、v-appはデフォルトでoverflow-yがonにしているぽいので、スクロールバーばずっと表示される。必要がなければ、手動でoffにする必要があります。

以上です。