Vuetify - v-data-table 的布局问题

我的 v 卡上有一个 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 布局，所有卡片尺寸相同。但警报组件突破了极限。它的渲染高度远高于总高度的 50%，并且包含 Alarms 组件的行比其他行高得多。它不再是所有项目高度相同的 2x2 布局。
• 根据组件的大小，我需要更改并重新计算 v-data-table 的分页。因此，当用户调整窗口大小时，我会更改表格的分页。但我不能，由于上述尺寸问题，桌子的 v 卡尺寸不正确。

我如何force2x2 布局，没有 v-data-table 推高其 v-card 的高度？

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

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

Update您可以调整表格的大小。

Small: Small https://i.stack.imgur.com/vQ6Q9.png

Large: 调整大小后 https://i.stack.imgur.com/EuvSA.png

基本问题是 v 卡无法保持其高度。

Thanks,

Sascha

Answer

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

推动的是 v-data-table。因此设置桌子的高度会有所帮助。 奇怪的部分是： 我正在设置

样式=“高度：5px；”

在 v 数据表上。

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

更新答案：

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

要解决该问题，请在这两个容器中的代码中添加一些显式的 Flex：

<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 https://codepen.io/Flamenco/pen/jQbgpG

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