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

Question

我想删除 v-data-table 上的分页，使用 hide-default-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>

想去掉分页

原文由 gold three 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 上演示

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

adding :hide-default-header="true" :hide-default-footer="true" will only remove the default footer and header, to completely disable pagination you need to add disable-pagination to your <v-data-table>

原文由 idirsun 发布，翻译遵循 CC BY-SA 4.0 许可协议