Vuetify 数据表如何垂直适合表格以及分页页脚粘在底部

Posted 2023-02-23

【中文标题】Vuetify 数据表如何垂直适合表格以及分页页脚粘在底部

【英文标题】：Vuetify datatable how fit the table vertically along with pagination footer stick to the bottom

【发布时间】：2020-09-16 03:01:34

【问题描述】：

无论数据表中的行数如何，我都很难让vuetify datatable 适合屏幕，同时分页页脚会粘在屏幕底部。

我尝试将页脚设置为使用以下 css 以始终粘在底部，但它没有按预期工作

  #table .v-data-footer 
  position: absolute;
  bottom: 0;


#table .v-data-table__wrapper 
  height: 400px;
  margin-bottom: 100px;
  overflow: auto scroll;

当数据表有更多的行数时，它只是将分页控件推到底部，直到我向下滚动到最底部才可见。我还尝试做的一件事是设置一个 数据表的固定高度，但由于设备尺寸的原因，这并不理想，对于更大的屏幕尺寸，它的行为真的很奇怪。

我有一个带有简单数据表的codepen，当我们从分页控件中增加行数时，它会加载更多的行数，并且由于高度而简单地隐藏了页脚。 我希望数据表的内容有一个高度，以便用户可以滚动浏览行，并且无论设备大小如何，分页控件都应该始终保持在底部。

如果有人可以帮助我或给我任何指示，我将不胜感激。

【问题讨论】：

这应该有助于#table .v-data-footer position: fixed; bottom: 0; width: 100%; justify-content: center;

这应该使页脚粘在底部，但主要内容不能滚动。它需要设置一个高度，以便内容可以滚动。

【参考方案1】：

您的代码 1.在v-container1中编码v-data-table 2.put ||style="身高：xxxx"|| class="elevation-1 溢出-y-auto" ||在 v 数据表中 3.在v-container2中编码v-pagination 试试看！！！！！！

<template>
<div>
      <v-container>
        <v-data-table
          :headers="headers"
          :items="items"
          :page.sync="page"
          :items-per-page="5"
          class="elevation-1 overflow-y-auto"
          :search="search"
          hide-default-footer
          @page-count="pageCount = $event"
          style="height: 300px"
        >
        </v-data-table>
      </v-container>
      
      <v-container>
        <div class="text-center pt-2">
          <v-pagination
            v-model="page"
            :length="pageCount"
          ></v-pagination>
        </div>
      </v-container>
</div>

</template>

【讨论】：

如果我提供静态高度，那么数据表高度将始终为 300px。这并不理想。

【参考方案2】：

如果您想要 v-data-table 适合屏幕。您可以在页脚使用position: fixed，并为包装器设置边距（与页脚高度相同）：

#table .v-data-footer 
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;


#table .v-data-table__wrapper 
  margin-bottom: 60px;

https://codepen.io/hans-felix/pen/MWaMENQ

【讨论】：

感谢您的回答！真的很感激，但我希望标题是固定的，并且包装区域可以与固定的页脚一起滚动！

您可以将顶部固定为相同的页脚方式

如果表格之前有更多元素怎么办，我想让标题固定但内容应该是可滚动的。例如这个codepen.io/sarojsasmal/pen/PoPrdrV?editors=1100。但问题是，如果我提供一个固定的高度，它就不会跨设备缩放。对于大型设备，表格内容内有空白空间。请尝试缩小 codepen 以查看问题。

查看example，页脚也可以这样做。