我想创建一个包含两个数据表的vue页面,该数据表填充了屏幕的一半(垂直)。如果需要,每个数据表都应具有一个滚动条。
我已经尝试过下面的标记,但这不能将数据表的大小调整到屏幕大小。这是codepen example
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-md fill-height>
<v-layout column>
<v-flex md6>
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
<v-flex md6>
<div>
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
答案 0 :(得分:4)
要获得结果,我需要在布局上将高度设置为100vh,并在每个flex上设置溢出。我已经更新了相关的Codepen
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout column style="height: 90vh"> <--- added height
<v-flex md6 style="overflow: auto"> <--- added overflow
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
<v-flex md6 style="overflow: auto"> <--- added overflow
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</v-app>
答案 1 :(得分:3)
在Vuetify 2中,只需设置height
和fixed-header
道具即可。不在文档或示例中,而是在简单表格示例中找到了。
答案 2 :(得分:1)
即使已经回答了。 我发现上面的答案拼写不正确。 下面是正确的示例代码。
<v-responsive
class="overflow-y-auto"
max-height="calc(90vh - 520px)">
</v-responsive
或
</v-data-table
>
<template v-slot:body>
<v-responsive
class="overflow-y-auto"
max-height="calc(90vh - 520px)"
>
<tbody>
<tr>
<td>example</td>
<td><strong>test example</strong></td>
</tr>
</tbody>
</v-responsive>
</template>
</v-data-table>