vue.js - Vuetify v-data-table - 如何使其填充可用高度?
问题描述
我正在使用 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>
回答
请参阅此其他链接。我们使表格填充了高度,但它也扩展了 v-card 的预设高度。这在另一个线程中进行了讨论和解决(其中重点更多是保持高度并在大小变化时动态重新进行分页)。
解决方案
对于您的身高问题,我建议使用v-data-iterator,因为您可以针对原始数据以外的内容完全自定义它。
至于您希望每页项目响应的表格,我认为您可以将计算道具与vuetify 的显示断点结合使用:
<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,以便我们更轻松地为您提供帮助 :)
推荐阅读
- javascript - 如何对这样格式的数组进行排序?
- generics - Kotlin:构造函数中可变参数的可变参数
- .htaccess - 您如何将 google 客户端 ID 从一个页面传递到另一个页面?
- c++ - 如何使用 OpenCV (c++) 存储序列中的所有帧?
- python - 为什么 matplotlib 会改变显示图像中的颜色强度?
- react-native - React Native 无限重复图像动画不同步
- python - setuptools 已安装,但我无法导入它
- javascript - 为映射的 true 或 false 值的集合返回 true/false
- migration - CircleCI 错误将配置迁移到版本 2
- regex - 如何在没有查询的情况下剥离 href 属性?