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

daolsyd0  于 2023-10-23  发布在  Vue.js
关注(0)|答案(7)|浏览(357)

我想删除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>

要删除分页

kg7wmglp

kg7wmglp1#

应该是: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上的演示

hwamh0ep

hwamh0ep2#

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

iszxjhcz

iszxjhcz3#

我只是把这两个 prop 加到v-data-table

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

不需要将true分配给props。即hide-default-footer="true"
我通常都是这么做的。

woobm2wo

woobm2wo4#

正确的答案是添加属性disable-pagination,正如Vuetify文档中所述:https://vuetifyjs.com/en/components/data-tables/Vuetify documentation
这对于Vuetify 2.x版本是正确的,如果您使用的是Vuetify 1.5,请使用hide-actions属性。https://v15.vuetifyjs.com/en/components/data-tables

uwopmtnx

uwopmtnx5#

使用disable-paginationpropx 1c 0d1x禁用v-data-table上的分页

llmtgqce

llmtgqce6#

对于那些使用Vuetify 3到达这里的人来说,我发现添加一个空的页脚槽可以实现相同的效果:

<template #bottom></template>

下面是关于页脚插槽的更多文档:

1l5u6lss

1l5u6lss7#

来自ittus的答案几乎可以工作,但是属性不应该被绑定(除非您有一个名为“true”的数据属性,该属性被设置为布尔值true)。
相反地,

:hide-default-header="true"
:hide-default-footer="true"

hide-default-header="true"
hide-default-footer="true"

相关问题