Vuetify v-data-table - 如何使其填充可用高度?
Posted
技术标签:
【中文标题】Vuetify v-data-table - 如何使其填充可用高度?【英文标题】:Vuetify v-data-table - how to make it fill the available height? 【发布时间】:2019-03-15 11:30:44 【问题描述】:我正在使用 Vue.js 和 Vuetify。 我有一个包含用户可配置项目的各个部分的页面。 布局是 2x2,所以每行有两个项目,2 行。
其中一项应包含显示警报的表格。
问题是分页。如果我使用“默认分页”,那么表格从 5 行开始,用户可以在下拉列表中选择行数。 但是我想使用Vuetify的外部分页。这里没问题。
但是......我如何让表格填满可用高度,并据此计算分页? 这样在大屏幕上……比如说……每页显示 12 个项目,而在较小的屏幕上……比如说……显示 8 个项目?
如果有 24 个数据条目,那么在第一种情况下,外部分页将允许用户选择第 1 或第 2 页,在第二种情况下,允许用户选择第 1、2 和 3 页。
默认值(5 行、10 行、15 行……)……这很好,但我想知道谁会需要它。表格应该填充高度并根据行数和可用高度本身计算分页......它可能/也许确实......但我不知道如何。
import Vue from 'vue';
import Component from 'vue-property-decorator';
import DeviceAlarm from '@/api/DashboardApi';
import getDeviceAlarms from '@/components/alarms/AlarmsStore';
@Component
export default class Alarms extends Vue
deviceAlarms: DeviceAlarm[] = [];
alarmPagination: any = sortBy: 'alarmTime', descending: true ;
public mounted(): void
this.deviceAlarms = getDeviceAlarms(this.$store);
;
get headers()
return [
text: this.$t('biz.dashboard.alarms.devicename'), align: "left", sortable: true, value: "fridgeDisplayName" ,
text: this.$t('biz.dashboard.alarms.eventdate'), align: "left", sortable: true, value: "alarmTime" ,
text: this.$t('biz.dashboard.alarms.status'), align: "left", sortable: false, value: "state" ,
text: this.$t('biz.dashboard.alarms.information'), align: "left", sortable: false, value: "task"
]
;
get pagination()
return this.alarmPagination;
;
set pagination(newPagination)
this.alarmPagination = newPagination;
;
get alarms()
return this.deviceAlarms;
;
get pages()
if (this.alarmPagination.rowsPerPage == null || this.alarmPagination.totalItems == null)
return 0
// Test stuff ... how to do that to fill the available space?
this.alarmPagination.totalItems = this.deviceAlarms.length;
this.alarmPagination.rowsPerPage = 9;
let page = Math.ceil(this.alarmPagination.totalItems / this.alarmPagination.rowsPerPage);
return page;
<template>
<div>
<v-card-title> $t('biz.general.items.alarms') </v-card-title>
<div id="tableDiv">
<v-data-table :headers='headers' :items='alarms' :pagination.sync='pagination' hide-actions>
<template slot="items" slot-scope="props">
<td> props.item.fridgeDisplayName </td>
<td> props.item.alarmTime | formatDateTime </td>
<td> props.item.state </td>
<td> props.item.task </td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-pagination circle v-model="pagination.page" :length="pages"></v-pagination>
</div>
</div>
</div>
</template>
<script lang = "ts" src="./Alarms.ts"></script>
回答
请参阅this other link。我们使表格填充了高度,但它也扩展了 v-card 的预设高度。这在另一个线程中进行了讨论和解决(其中重点更多是保持高度并在大小变化时动态重新进行分页)。
【问题讨论】:
你有解决问题的办法了吗?我认为您应该为您的问题创建一个最小示例,以便帮助者更容易准确地理解您想要什么。 是的,实际上还有另一个问题,但另一个也回答了这个问题。但是我们昨天下午做的最终解决方案,所以我还不能更新这个问题。我们意识到这种“使用整个页面”是我们需要自己做的事情。但是有一些小问题(在另一个问题中提出)。但是……解决了。 link 【参考方案1】:对于您的身高问题,我建议使用v-data-iterator,因为您可以针对原始数据以外的内容完全自定义它。
至于您希望每页项目响应的表格,我认为您可以将计算道具与 vuetify's display breakpoints 结合使用:
<v-data-table
:items="items"
:items-per-page="rowsPerPage"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer />
computed:
itemsPerPage: function ()
if(this.$vuetify.breakpoint.smAndDown)
return 2 // Say you want to show 2 items on small screens and smaller
if (this.$vuetify.breakpoint.mdAndDown)
return 4
return 10
,
pageCount: function ()
return Math.ceil(this.items.length / this.itemsPerPage)
Codesandbox for example
如果我没有正确理解您的问题,请尝试制作一个包含问题的 Codesandbox,以便我们更轻松地为您提供帮助 :)
【讨论】:
以上是关于Vuetify v-data-table - 如何使其填充可用高度?的主要内容,如果未能解决你的问题,请参考以下文章
Vue, Vuetify 2, v-data-table - 如何在表格底部显示总原始数据
如何在 v-data-table Vue.js + Vuetify 中显示和隐藏行
如何在 Vuetify v-data-table 上对齐标题