Question

我正在使用Vue.js和Vuetify。我有一个包含各个部分的页面，其中包含供用户配置的项目。布局是2x2，因此每行有两行，每行有两行。

其中一项应包含显示警报的表。

问题是分页。如果我使用“默认分页”，则该表从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卡的预设高度。在另一个线程中对此进行了讨论和变通（重点更多地放在保持高度上，并在大小改变时动态地进行分页）。

Answer 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-如何使其填充可用高度？

1 个答案: