gpt4 book ai didi

vue.js - Vuetify v-data-table - 如何使其填充可用高度?

转载 作者:行者123 更新时间:2023-12-04 11:34:13 26 4
gpt4 key购买 nike

我正在使用 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 .我们让 table 填充了高度,但它也扩展了 v 卡的预设高度。这在另一个线程中进行了讨论和解决(重点是保持高度并在大小发生变化时即时重新进行分页)。

最佳答案

对于您的高度问题,我建议使用 v-data-iterator因为您可以针对原始数据以外的内容完全自定义它。
至于您希望每页项目具有响应性的表格,我认为您可以将计算 Prop 与 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,以便我们更轻松地为您提供帮助 :)

关于vue.js - Vuetify v-data-table - 如何使其填充可用高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52742164/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com