Vuetify - v-data-table 的布局问题 [英] Vuetify - Layout problem for v-data-table
问题描述
我在 v-card 上有一个 Vuetify v-data-table，但我无法正确布局.
所以它是一个可配置的 2x2 布局(它应该使用分页，没有滚动).
<v-layout 列><v-布局行><DashboardItem :item="itemTypes[0]" class="xs6"/><DashboardItem :item="itemTypes[1]" class="xs6"/></v-layout><v-布局行><DashboardItem :item="itemTypes[2]" class="xs6"/><DashboardItem :item="itemTypes[3]" class="xs6"/></v-layout></v-layout></template>用户可以将项目配置为 2x2 布局.这是一个 2x2 布局，因此预计总共有 4 个项目，所有 4 个项目的大小相同.
DashboardItem 如下所示:
<v-flex><v-card height="100%"><统计 v-if="item==='统计'"/><Alarms v-if="item==='Alerts'"/><设备 v-if="item==='设备'"/><Heartbeat v-if="item==='Heartbeat'"/></v-card></v-flex></template>因此，我们会根据项目类型显示该类型的组件.现在它变得有趣(至少对我而言).这是警报组件.这是一个标题 + 一个显示数据的表格.
<v-layout column child-flex><v-card-title>{{ $t('biz.general.items.alarms') }}</v-card-title><v-layout ref="tableDiv" style="height:90%;"列 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 |格式日期时间}}</td><td>{{ props.item.state }}</td><td>{{ props.item.task }}</td></模板></v-data-table></v-layout><div class="text-xs-center pt-2"><v-pagination circle v-model="pagination.page" :length="pages"></v-pagination></v-layout></template>
这种作品.但是有问题:
- 警报组件的高度太大.它应该是一个 2x2 布局，所有卡片的尺寸都相同.但是警报组件突破了极限.它呈现得远高于总高度的 50%，并且包含警报组件的行比另一行高得多.它不再是所有项目高度相同的 2x2 布局.
- 根据组件的大小，我需要更改并重新计算v-data-table的分页.因此，当用户调整窗口大小时，我会更改表格的分页.但我不能，由于上述尺寸问题，桌子的 v 卡尺寸不正确.
我如何强制一个 2x2 布局，而不需要 v-data-table 推动其 v-card 的高度?
这是一个具有预期布局的 CodePen:https://codepen.io/saschaausulm/pen/xQwawJ
这说明了问题:https://codepen.io/saschaausulm/pen/KrdBZd
更新您可以调整表格的大小.
小:小
大:调整大小后
基本问题是 v 卡没有保持其高度.
谢谢，
萨沙
回答
答案比预期的要奇怪一些，但 Steven Spungin 的答案有所帮助.
推送的是 v-data-table.所以设置桌子的高度有帮助.还有奇怪的部分:我正在设置
style="height:5px;"
在 v-data-table 上.
然后，v-data-table 留在 v-card 中.并在用户更改窗口大小时按预期通过 v-resize 调整大小/分页.
更新答案:
数据表高度固定，不灵活.
要解决该问题，请向以下两个容器中的代码添加一些显式 flex:
<v-容器填充高度><v-layout column fill-height><v-layout row style='flex: 1 1 50%;溢出:隐藏'>...<v-layout row style='flex: 1 1 50%;溢出:隐藏'> 然后允许数据表的父卡片滚动.
这是一个代码笔.https://codepen.io/Flamenco/pen/jQbgpG
根据我之前的回答，您还可以通过使用样式/高度、样式/最大高度或设置组件上的最大显示行数来设置 v-data-table 的大小.
I have a Vuetify v-data-table on a v-card and I cannot get the layout right.
So it's a configurable 2x2 layout (and it's supposed to use pagination, no scrolling).
<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>
The user can configure items into a 2x2 layout. This is a 2x2 layout, so it's expected to be 4 items in total, with all 4 items of the same size.
This is what a DashboardItem looks like:
<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>
So, depending on the item type we show a component for that type. Now it gets interesting (at least for me). Here is the Alarms component. It's a title + a table that shows the data.
<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>
This kind of works. But there are problems:
- The height of the Alarms component is too large. It is supposed to be a 2x2 layout with all cards of the same size. But the Alarms component pushes the envelope. It's rendered much higher than 50% of the overall height and the row that contains the Alarms component is much higher than the other row. It's no longer a 2x2 layout with all items of the same height.
- Based on the size of the component, I need to change and recalculate the paging of the v-data-table. So when the user resizes the window, I change the pagination of the table. But I cannot, due to the size issue above, the table's v-card is just not sized properly.
How do I force a 2x2 layout, without the v-data-table pushing the height of its v-card?
Here is a CodePen with the expected layout: https://codepen.io/saschaausulm/pen/xQwawJ
This shows the problem: https://codepen.io/saschaausulm/pen/KrdBZd
Update You can resize the table.
Small: Small
Large: After resize
The base issue is that the v-card doesn't keep its height.
Thanks,
Sascha
Answer
The answer is a bit weirder than expected but Steven Spungin's answer helped a bit.
It's the v-data-table that pushes. So setting the height of the table helps. And the weird part: I am setting
style="height:5px;"
on the v-data-table.
Then, the v-data-table stays in the v-card. And resizes/paginates through the v-resize as expected when the user changes the size of the window.
Updated Answer:
The data table has a fixed height, and is not flexible.
To work around that issue, add some explicit flex to your code in these 2 containers:
<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'>
Then allow the data table's parent card to scroll.
<v-card height="100%" style='overflow:auto'>
Here is a codepen. https://codepen.io/Flamenco/pen/jQbgpG
Per my previous answer, you can also set the size of the the v-data-table by using style/height, style/max-height, or by setting the max displayed rows on the component.
这篇关于Vuetify - v-data-table 的布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
