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

Question

无论数据表中有多少行，我都很难使 vuetify 数据表适合屏幕以及分页页脚粘在屏幕底部。

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

#table .v-data-footer {
position: absolute;
bottom: 0;
}
#table .v-data-table__wrapper {
height: 400px;
margin-bottom: 100px;
overflow: auto scroll;
}

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

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

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

Answer 1

如果你想要 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

Answer 2

你的代码 1.在 v-容器中编码 v-data-table1 2.把 ||样式="高度：xxxx"||class="elevation-1 overflow-y-auto" ||在V数据表中 3.在 V-容器中编码 V 分页2 试试吧!!!!

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