Vuetify 删除 v-data-table 上的分页

Question

我想删除 v-data-table 上的分页，使用 hide-default-footer 但它不起作用。

尝试使用 hide-dafault-footer

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-default-header
        hide-default-footer
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.index }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ getProject(props.item.project_uuid) }}</td>
          <td>{{ props.item.deadline }}</td>
          <td>{{ getUser(props.item.executor) }}</td>
          <td>{{ getUser(props.item.creator) }}</td>
          <td>{{ props.item.description }}</td>
        </template>
      </v-data-table>

想去掉分页

Answer 1

它应该是 :hide-default-footer="true"

<v-data-table
        :headers="headers"
        :items="desserts"
        :hide-default-header="true"
        :hide-default-footer="true"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.index }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ getProject(props.item.project_uuid) }}</td>
          <td>{{ props.item.deadline }}</td>
          <td>{{ getUser(props.item.executor) }}</td>
          <td>{{ getUser(props.item.creator) }}</td>
          <td>{{ props.item.description }}</td>
        </template>
      </v-data-table>

codepen 上的演示

Answer 2

添加 :hide-default-header="true" :hide-default-footer="true" 只会删除默认的页脚和页眉，要完全禁用您需要添加disable-pagination到您的分页 <v-data-table>

Answer 3

我只是将这两个道具添加到v-data-table

<v-data-table hide-default-footer disable-pagination />

无需分配true给 props .iehide-default-footer="true"

我通常就是这么做的。

Answer 4

For those arriving here using Vuetify 3, I've found adding an empty footer slot achieves the same:

<template #bottom></template>

To show more than the first 10 items, disable pagination with :items-per-page="0". Full example:

<v-data-table
    :items="thedata"
    :items-per-page="0"
  >
  <template #bottom></template>
</v-data-table>

Here's further documentation on the footer slot:

• https://vuetifyjs.com/en/components/data-tables/slots/

• https://vuetifyjs.com/en/api/v-data-table/#slots-bottom

Answer 5

要禁用 v-data-table 上的分页，请使用disable-pagination prop

Answer 6

正确的答案是添加disable-paginationVuetify 文档中所述的属性： https: //vuetifyjs.com/en/components/data-tables/Vuetify 文档

这适用于 Vuetify 2.x 版本，如果您使用 Vuetify 1.5，请改用该hide-actions属性。 https://v15.vuetifyjs.com/en/components/data-tables