如何设置Vuetify v-data-table组件的动态自适应高度

使用<v-data-table>组件实现占满可用高度的效果时，最初的实现方式是给组件添加height="70vh"，但这只是临时变通方案：只要修改顶部“Devices”工具栏的高度，就必须同步调整表格的高度值，维护成本很高。
下面说明动态自适应高度的实现方法。

预期目标 #

仅通过如下基础配置，就让表格自动计算适配高度：

<v-data-table
  :headers="headers"
  :items="items"
  height="100%"
  fixed-header
  disable-pagination
></v-data-table>

第一步：给外层容器设置明确高度 #

CSS中百分比高度生效的前提是父元素有明确的高度值，因此首先要给包裹表格的外层标签显式设置高度：

<template>
  <!-- $vuetify.application 存储了全局布局相关的尺寸变量 -->
  <v-container :style="{ height: `calc(100vh - ${$vuetify.application.bar}px)` }">
    <!-- 表格放在这个容器内部 -->
  </v-container>
</template>

第二步：适配v-data-table的DOM结构 #

<v-data-table>最终渲染的DOM结构如下：

<div class="v-data-table ...">
  <div class="v-data-table__wrapper">表格滚动区域</div>
  <div class="v-data-footer">分页/页脚区域</div>
</div>

给组件设置height="100%"时，高度实际只会作用在内部的v-data-table__wrapper滚动容器上，要让整体高度符合预期，还需要给组件最外层的div也设置100%高度：

<template>
  <v-container :style="{ height: `calc(100vh - ${$vuetify.application.bar}px)` }">
    <v-data-table
      style="height: 100%;"
      :headers="headers"
      :items="items"
      height="100%"
      fixed-header
      disable-pagination
    ></v-data-table>
  </v-container>
</template>

第三步：扣除固定区域高度 #

表格默认的页脚高度为59px，需要从总高度里扣除这部分，避免内容溢出：

<!-- 核心代码片段 -->
<v-data-table
  style="height: 100%;"
  :headers="headers"
  :items="items"
  height="calc(100% - 59px)"
  fixed-header
  disable-pagination
></v-data-table>

方案局限性 #

以上方案可以满足基础使用需求，但存在两个明显的不足：

• 硬编码了默认页脚高度59px，如果后续Vuetify版本迭代调整了默认页脚尺寸，或者自定义了页脚样式，布局就会错位，不属于最佳实践
• 如果给组件添加了#top这类自定义插槽，需要额外通过JS计算插槽内容的高度，再手动从总高度里扣除，实现比较繁琐

存在顶部插槽时，代码需要调整为如下形式：

<!-- 核心代码片段 -->
<v-data-table
  style="height: 100%;"
  :headers="headers"
  :items="items"
  :height="`calc(100% - 59px - ${topSlotHeight}px)`"
  fixed-header
  disable-pagination
></v-data-table>

如果只需要快速实现可用效果，上述代码完全可以满足需求。

内容的提问来源于stack exchange，提问作者PyKKe