如何将Vuetify V-Data-table高度设置为动态？

Question

如您所见，我使用了＆lt; v-data-table＆gt;，它占用了所有可用的高度。我通过向其添加height =“ 70VH”来获得此结果，但是显然这是一个解决方法：如果我更改工具栏高度（显示“设备”的高度），我必须更新表格高度因此。

我如何设置高度以动态？

编辑＃1

目的是拥有一个表，该表可以通过简单地

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

使用height =“ 100％”来正确计算其高度，我们必须明确将高度设置为 将要包裹我们的桌子的标签

<template>
  <!-- $vuetify.application stores layout sizes -->
  <v-container :style="{ height: `calc(100vh - ${$vuetify.application.bar}px)` }">
    <!-- table here -->
  </v-container>
</template>

在继续解释之前 ，我想指出的是。 ＆lt; v-data-table＆gt; s被呈现

<div class="v-data-table ...">
  <div class="v-data-table__wrapper">...</div>
  <div class="v-data-footer">...</div>
</div>

，当我们通过执行此＆lt; v-data-table高度=“ 100％”＆gt; ，我们正在设置v-data-table__wrapper高度。为了使一切都按预期工作，我们也必须设置外部＆lt; div＆gt;高度。

<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。

<!-- Relevant code snippet -->
<v-data-table
  style="height: 100%;"
  :headers="headers"
  :items="items"
  height="calc(100% - 59px)"
  fixed-header
  disable-pagination
></v-data-table>

尽管该解决方案有点有效，但有几件事要指出：

1. 我们正在对页脚高度进行硬编码，这不是一个好习惯。
2. 当您将内容添加到插槽中时，一切都会变得更加混乱，例如#top一个。您也必须考虑其高度。

。

<!-- Relevant code snippet -->
<v-data-table
  style="height: 100%;"
  :headers="headers"
  :items="items"
  :height="`calc(100% - 59px - ${topSlotHeight}px)`"
  fixed-header
  disable-pagination
></v-data-table>

如果您正在寻找解决方法，则此实施可能适合您。