时间戳

首页 > 解决方案 > Vuetify 数据表如何垂直适合表格以及分页页脚粘在底部

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

问题描述

无论数据表中的行数如何，我都很难使vuetify数据表适合屏幕，而分页页脚则粘在屏幕底部。

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

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

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

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

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

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

标签： cssvue.jsvue-componentvuetify.js

解决方案

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

推荐阅读