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

【问题标题】：Vuetify remove pagination on v-data-tableVuetify 删除 v-data-table 上的分页
【发布时间】：2019-12-13 17:02:34
【问题描述】：

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

想去掉分页

【问题讨论】：

标签： vue.js pagination vuetify.js

【解决方案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上的演示

【讨论】：

如果以后有人发现这个，槽是“item”而不是“items”，你还必须提供标签。
查看 idirsun 评论，如果你只这样做，你只会看到前 10 个元素。
对于 Vuetify 2.x：这只会隐藏分页控件，但表格仍会分页。对于最新版本，您需要隐藏控件并禁用结果的实际分页。
非常重要：也要设置disable-pagination，否则如上所述你只会看到10个元素。
你也可以只使用hide-default-footer而不是:hide-default-footer="true"

【解决方案2】：

来自 ittus 的答案几乎可以工作，但不应绑定属性（除非您有一个名为“true”的数据属性设置为布尔值 true。

相反，

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

应该是

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

【讨论】：

这实际上是错误的。这样做会将字符串“true”作为道具传递，这可能会导致 vue 警告接收到它不期望的数据类型。相反，只需提供不带值的属性（例如，仅hide-default-footer）。

【解决方案3】：

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

【讨论】：

从我的经验来看，你需要两个

【解决方案4】：

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

【讨论】：

除了发布文档的屏幕截图之外，还要添加相关链接，因为这样更容易找到更多信息。
不知道为什么，但这个道具没有效果。

【解决方案5】：

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

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

【讨论】：

这会关闭分页，并显示整个项目列表。但是，这不会隐藏分页页脚

【解决方案6】：

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

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

不需要像这样分配true `hide-default-footer="true"

我就是这样做的。

【讨论】：