Vuetify 使卡片的内容(表格)适合其中 [英] Vuetify make content (table) of card fit inside it
问题描述
我在对话框中有一张卡片,上面有标题和表格(以后会更复杂).该对话框设置了 width="80vw".我不希望对话框和卡片滚动,但我希望表格在标题固定的情况下滚动,因此您始终可以看到列名.当我以像素为单位为表格设置固定高度时,它会自动执行我想要的操作,但是使用溢出-y 或百分比高度没有任何作用.
如何使桌子适合卡片?
<v-card-title>文件</v-card-title><v-card-text><v-simple-table fixed-header><模板 v-slot:default><头><tr><th class="text-left">姓名</th></tr></thead><tr v-for="文件中的文件" :key="file.name" @click="select(file)"><td><v-icon>{{ file.directory ?"mdi-folder-outline" : "mdi-file" }}</v-icon>{{ 文档名称 }}</td></tr></tbody></模板></v-simple-table></v-card-text></v-card> 解决方案 我已经设法使用 d-flex、溢出和放弃 vuetify 布局并仅使用 div 来做到这一点.对我来说,这感觉就像一个黑客,而不是它应该完成的方式,但我还没有找到更好的解决方案.有点像bootsrap样式的布局不支持item的伸缩,很失望.
<v-container class="d-flex flex-column" 流体><div>文件<v-simple-table fixed-header class="d-flex flex-column" style="overflow-y: hidden"><模板 v-slot:default><头><tr><th class="text-left">姓名</th></tr></thead><tbody style="overflow-y: scroll"><tr v-for="文件中的文件" :key="file.name" @click="select(file)"><td v-ripple><v-icon>{{ file.directory ?"mdi-folder-outline" : "mdi-file" }}</v-icon>{{ 文档名称 }}</td></tr></tbody></模板></v-simple-table></v-容器></v-card>
I have a card inside a dialog with a title and a table (it will be more complex in the future). The dialog has a set width="80vw". I want neither the dialog nor the card to scroll, but I'd like the table to scroll with the header fixed, so you can always see column names. When I set fixed height to the table in pixels, it does what I want automatically, however using overflow-y or percent height does nothing.
How can I make the table fit the card?
<v-card height="80vh">
<v-card-title>
Files
</v-card-title>
<v-card-text>
<v-simple-table fixed-header>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
</tr>
</thead>
<tbody>
<tr v-for="file in files" :key="file.name" @click="select(file)">
<td>
<v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
{{ file.name }}
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card-text>
</v-card>
解决方案 I've managed to do this using d-flex, overflow and ditching the vuetify layout and just using divs instead. It feels to me like a hack and not like the way it's supposed to be done, but I have not yet found a better solution. Kinda seems that the bootsrap style layout doesn't support stretching and shrinking of items, which is very disappointing.
<v-card height="80vh" class="d-flex">
<v-container class="d-flex flex-column" fluid>
<div>
Files
</div>
<v-simple-table fixed-header class="d-flex flex-column" style="overflow-y: hidden">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
</tr>
</thead>
<tbody style="overflow-y: scroll">
<tr v-for="file in files" :key="file.name" @click="select(file)">
<td v-ripple>
<v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
{{ file.name }}
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-container>
</v-card>
这篇关于Vuetify 使卡片的内容(表格)适合其中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆