如何在 Vuetify 数据表中显示所有项目而不是仅显示 10 行？

Question

我正在使用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道具，但似乎没有任何效果。

如何为表格提供自动高度，以便无论表格中有多少行它都会扩展？

Answer 1

发生此问题是因为您已使用 删除了默认页脚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>

演示：

<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%"}],
    }
  },
})

Answer 2

每页的默认项数为 10。使用 -1 而不是 10。添加此行。

:items-per-page="-1"