css - 如何在 Vuetify 数据表中显示所有项目而不是仅显示 10 行?
问题描述
我正在使用 Vuetify 的数据表:
<v-data-table
:ref="`sortableTable${index}`"
class="items-table-container"
:headers="headers"
:items="category.items"
hide-default-footer>
...custom rows
</v-data-table>
我注意到在向表格中添加新项目时,它没有出现。我验证了我传递的项目有 11 个项目,但是表格最多只显示 10 个。
当我看着桌子周围的包装纸时,我注意到它有:
overflow-x: auto;
overflow-y: hidden;
但是,由于某种原因,我无法覆盖它。我试过添加height
道具,但似乎没有任何效果。
如何给表格一个自动高度,以便无论表格中有多少行它都会扩展?
解决方案
发生此问题是因为您已使用 删除默认页脚hide-default-footer
,但仍启用分页。分页默认设置为每行仅显示 10 个项目。您可以通过简单地添加disable-pagination
选项轻松解决此问题,这会完全禁用分页,然后您还可以看到第 10 个索引之后的所有项目。
<v-data-table
:ref="`sortableTable${index}`"
class="items-table-container"
:headers="headers"
:items="category.items"
hide-default-footer
disable-pagination>
演示:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{text:"Dessert (100g serving)",align:"start",sortable:!1,value:"name"},{text:"Calories",value:"calories"},{text:"Fat (g)",value:"fat"},{text:"Carbs (g)",value:"carbs"},{text:"Protein (g)",value:"protein"},{text:"Iron (%)",value:"iron"}],
desserts: headers=[{name:"Frozen Yogurt",calories:159,fat:6,carbs:24,protein:4,iron:"1%"},{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"},{name:"Gingerbread",calories:356,fat:16,carbs:49,protein:3.9,iron:"16%"},{name:"Jelly bean",calories:375,fat:0,carbs:94,protein:0,iron:"0%"},{name:"Lollipop",calories:392,fat:.2,carbs:98,protein:0,iron:"2%"},{name:"Honeycomb",calories:408,fat:3.2,carbs:87,protein:6.5,iron:"45%"},{name:"Donut",calories:452,fat:25,carbs:51,protein:4.9,iron:"22%"},{name:"KitKat",calories:518,fat:26,carbs:65,protein:7,iron:"6%"},{name:"Jelly bean",calories:375,fat:0,carbs:94,protein:0,iron:"0%"},{name:"Lollipop",calories:392,fat:.2,carbs:98,protein:0,iron:"2%"},
{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"},
{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"}],
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout column>
<v-data-table :headers="headers"
:items="desserts"
class="elevation-1"
hide-default-footer
disable-pagination
dense>
</v-data-table>
</v-layout>
</v-container>
</v-app>
</div>
推荐阅读
- javascript - 通过嵌套对象属性映射时如何减少嵌套?
- spring-boot - shiro buji pac4j cas 单点注销不起作用
- linux - Azure Linux VM 上的 OpenSSH SSH-2 私钥(旧 PEM 格式)
- javascript - 无法使用 useState 更改 React 状态
- python - 在 Python 中加载大量(600)大图像(42M 像素)的最快方法
- c - 我想通过使用矩阵在c语言中找到行中的最小值但列中的最大值
- c# - 如何从 c# 执行 .rmd 文件并获取执行响应 - 点网
- angular - NgRx 效果与 RxJS 运算符相结合
- reactjs - Aws-Amplify:manifest.json 和 env.json 加载 index.html
- jquery - 使用jquery将数据动态绑定到html的问题