Vuetify - 如何进行分页？

Posted 2023-02-22

【中文标题】Vuetify - 如何进行分页？

【英文标题】：Vuetify - how to make pagination?

【发布时间】：2018-05-07 13:56:41

【问题描述】：

我想为 VueJS 使用 Vuetify 框架中的分页。

来自 Vuetify 的分页组件：

<v-pagination
        v-model="pagination.page"
        :length="pagination.total / 5"
        :total-visible="pagination.visible"
></v-pagination>

我想在用户单击按钮时执行一个功能。我想获取页码，然后在参数中使用这个页码执行函数。

方法中的 getItems 代码：

this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage

数据：

data () 
  return 
    items: [],
    pagination: 
      page: 1,
      total: 0,
      perPage: 0,
      visible: 7
    
  

【参考方案1】：

评论： 在你实现分页之前，首先尝试看看你是否真的需要它，或者你可以使用替代方案：https://slack.engineering/evolving-api-pagination-at-slack-1c1f644f8e12https://dzone.com/articles/why-most-programmers-get-pagination-wronghttp://allyouneedisbackend.com/blog/2017/09/24/the-sql-i-love-part-1-scanning-large-table/https://www.xarg.org/2011/10/optimized-pagination-using-mysql/https://www.eversql.com/faster-pagination-in-mysql-why-order-by-with-limit-and-offset-is-slow/

---

---

回答：

您可以对pagination.page 的更改做出反应，watcher 因为pagination.page 在按钮单击时发生更改，然后执行您的method。

watch: 
    "pagination.page": (newPage) => 
        this.onPageChange(newPage);
    

或者对组件的input事件做出反应：

<v-pagination
    @input="onPageChange"
></v-pagination>

【参考方案2】：

查看事件部分的文档。我找到了处理新页面的输入事件。

<v-pagination
  v-model="pagination.page"
  :length="pagination.pages"
  @input="next"
></v-pagination>

还有我的下一个方法：

next (page) 
  api.getBillList(page)
    .then(response => 
      this.bills = response.data.content
      console.log(this.bills)
    )
    .catch(error => 
      console.log(error)
    )

【讨论】：

您是如何计算您的:length 进行分页的？我遵循了 vuetify 文档和示例，但它对我不起作用。发表了一个问题here

【参考方案3】：

我在搜索在我的 VueJS 项目中尝试实现此分页时收到的错误后到达这里：[Vue warn]: Invalid prop: custom validator check failed for prop "length".。

我的问题，看起来像您在问题的示例代码中可能遇到的问题，是我对长度的计算得出了十进制答案。例如，如果我有 23 条记录和 5 的页面大小，它将返回 4.6，给我上面的错误。我必须将我的计算包含在 Math.ceil() 中以得出适当的长度值。

希望这可以帮助某人:)

<v-pagination
   v-model="currPage"
   :length="Math.ceil(arr.length / pageSize)"
   :total-visible="6"
></v-pagination>

【讨论】：

我们如何给每个分页按钮一个链接（对于这种情况，它从 api 获取链接）