如何检测Vuetify中的分页变化？

Question

是否有任何事件可以检查 vuetify 中的数据表分页更改数字？update:pagination数据表的事件如何工作？

Answer 1

我通常从后端服务器加载数据，我在实现 update:pagination 事件时没有遇到任何问题，如下所示：

<v-data-table ... @update:pagination="updatePagination" />

然后我创建要在分页更新时调用的方法：

methods: {
  updatePagination (pagination) {
    console.log('update:pagination', pagination)
  }
}

请注意 updatePagination 方法将在安装数据表组件时“自动”调用，当然，在您单击分页箭头之后。

Answer 2

\n

Vuetify 使分页变得非常容易。只要仔细阅读文档，你就会发现任何相关的内容。

\n

\n\n

如果您使用 v-data-table分页和排序服务器端vuetify 会说：\n如果您\xe2\x80\x99从后端加载数据并希望在显示结果之前对结果进行分页和排序，则可以使用total-items支柱。定义此属性将禁用内置排序和分页，您将需要使用分页属性来监听更改。

\n\n

所以当分页发生变化时从后端获取数据，对应的代码是：

\n\n

watch: {\n  pagination: {\n    handler () {\n      getDataFromBacked()\n        .then(data => {\n          this.items = data.items\n          this.totalItems = data.total\n        })\n    },\n    deep: true\n  }\n},\n

\n