V-数据表的Vuetify布局问题
我在一张v卡上有一个Vuetify v数据表，我不能正确地进行布局。
因此，它是一个可配置的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%，而包含警报组件的行比另一行要高得多。它不再是所有高度相同的2x2布局。
- 根据组件的大小，我需要更改和重新计算v数据表的分页。因此，当用户调整窗口大小时，我将更改表的分页。但我不能，因为上面的尺寸问题，这张表的v卡的大小不合适。
如果没有v数据表推送v卡的高度，I如何强制进行2x2布局？
下面是一个具有预期布局的CodePen：https://codepen.io/saschaausulm/pen/xQwawJ
这显示了问题：https://codepen.io/saschaausulm/pen/KrdBZd
更新您可以调整表的大小。
小：小的
大型：调整尺寸后
最基本的问题是v卡不能保持高度。
谢谢,
萨沙
答案
答案比预期的要奇怪一些，但是史蒂文·斯潘金的回答提供了一点帮助。
是v数据表推动的。因此，设置桌子的高度是有帮助的。奇怪的是:我正在设置
Style=“高度:5 5px；
在V-数据表上。
然后，v数据表留在v卡中。并在用户更改窗口大小时，按预期通过v-调整大小调整/分页。
回答 1
Stack Overflow用户
发布于 2018-11-07 07:47:57
最新答复：
数据表有固定的高度，不灵活。
要解决这个问题，请在以下两个容器中向代码中添加一些显式的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
根据我以前的回答，您还可以通过使用样式/高度、样式/最大高度或设置组件上显示的最大行来设置v数据表的大小。
https://stackoverflow.com/questions/53174436
复制相似问题
腾讯云开发者
