Question

我在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卡大小。

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

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

这显示了问题： https://codepen.io/saschaausulm/pen/KrdBZd

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

小： Small

大： After resize

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

谢谢

Sascha

答案

答案比预期的要怪，但史蒂芬·斯宾金（Steven Spungin）的答案有所帮助。

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

style =“ height：5px;”

在v-data-table上。

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

Answer 1

Vuetify-v数据表的布局问题

1 个答案: