vuetify.js - Vuetify - v-data-table 的布局问题

Question

我在 v-card 上有一个 Vuetify v-data-table，但我无法正确布局。

所以这是一个可配置的 2x2 布局(它应该使用分页，没有滚动)。

<template>
  <v-layout column>
    <v-layout row>
      <DashboardItem :item="itemTypes[0]" class="xs6" />
      <DashboardItem :item="itemTypes[1]" class="xs6" />
    </v-layout>
    <v-layout row>
      <DashboardItem :item="itemTypes[2]" class="xs6" />
      <DashboardItem :item="itemTypes[3]" class="xs6" />
    </v-layout>
  </v-layout>
</template>

用户可以将项目配置为 2x2 布局。这是一个 2x2 布局，因此预计总共有 4 个项目，所有 4 个项目的大小相同。

这是 DashboardItem 的样子:

<template>
  <v-flex>
    <v-card height="100%">
      <Statistics v-if="item==='Statistics'" />
      <Alarms v-if="item==='Alerts'" />
      <Devices v-if="item==='Devices'" />
      <Heartbeat v-if="item==='Heartbeat'" />
    </v-card>
  </v-flex>
</template>

因此，根据项目类型，我们会显示该类型的组件。 现在它变得有趣了(至少对我而言)。这是警报组件。它是一个标题 + 一个显示数据的表格。

<template>
  <v-layout column child-flex>
    <v-card-title>{{ $t('biz.general.items.alarms') }}</v-card-title>
    <v-layout ref="tableDiv" style="height:90%;" column v-resize="onResize">
      <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>
    </v-layout>
    <div class="text-xs-center pt-2">
      <v-pagination circle v-model="pagination.page" :length="pages"></v-pagination>
    </div>
  </v-layout>
</template>

这类作品。但是也有问题:

• 警报组件的高度太大。它应该是所有卡片大小相同的 2x2 布局。但是 Alarms 组件突破了极限。它呈现的高度远高于总高度的 50%，并且包含 Alarms 组件的行比另一行高得多。它不再是所有项目高度相同的 2x2 布局。
• 根据组件的大小，我需要更改并重新计算 v-data-table 的分页。因此，当用户调整窗口大小时，我会更改表格的分页。但我不能，因为上面的大小问题，表格的 v-card 大小不正确。

我如何强制 2x2 布局，而不让 v-data-table 推高其 v-card 的高度？

这是一个具有预期布局的 CodePen: https://codepen.io/saschaausulm/pen/xQwawJ

这说明了问题: https://codepen.io/saschaausulm/pen/KrdBZd

更新 您可以调整表格的大小。

小: Small

大: After resize

基本问题是 v-card 不保持其高度。

谢谢，

萨沙

回答

答案比预期的有点奇怪，但 Steven Spungin 的回答有点帮助。

推送的是v-data-table。所以设置表格的高度有帮助。 奇怪的部分: 我在设置

style="高度:5px;"

在 v 数据表上。

然后，v-data-table 保留在 v-card 中。并在用户更改窗口大小时按预期通过 v-resize 调整大小/分页。

Answer 1

更新的答案:

数据表高度固定，不灵活。

要解决该问题，请在这两个容器中的代码中添加一些明确的弹性:

<v-app id="inspire">
    <v-container fill-height>
      <v-layout column fill-height>
        <v-layout row style='flex: 1 1 50%; overflow: hidden'>
...
        <v-layout row style='flex: 1 1 50%; overflow: hidden'>

然后允许数据表的父卡片滚动。

<v-card height="100%" style='overflow:auto'>

这是一个代码笔。 https://codepen.io/Flamenco/pen/jQbgpG

根据我之前的回答，您还可以使用 style/height、style/max-height 或设置组件上显示的最大行数来设置 v-data-table 的大小。