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

Posted 2023-02-22

【中文标题】Vuetify 删除 v-data-table 上的分页

【英文标题】：Vuetify remove pagination on 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>

想去掉分页

【参考方案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"

我就是这样做的。