javascript - 如何访问 vuetify.js 2 中 v-data-table 之外的总项目？

Question

我刚刚将 vuetify.js 从 1.5 迁移到 2.1.7。以前我能够访问总号。 v-data-table 之外的数据表中的项目(响应式(Reactive))使用 :pagination.sync="pagination" Prop 并使用 pagination.totalItems 访问。

验证 1.5

<template>
    <div>
        <span>Total: {{ pagination.totalItems }}</span>
        <v-data-table :pagination.sync="pagination" :items="items">
            ...
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "LoadTable",
        data() {
            return {
              items: [...],
              pagination: {}
            };
        }
   }
</script>

但是在 2.x 版本中，pagination prop 已被删除，取而代之的是 options，而不是破坏性更改，并且无法访问总编号。项目。版本 2 中是否有任何方法可以访问与搜索和过滤器同步的所有项目？

Answer 1

<v-data-table>有一个名为 pagination 的事件.您可以使用该事件更新您当前的 pagination属性，除非您想覆盖分页选项。

尝试这样使用它:

<v-data-table :items="items" @pagination="pagination = $event">

每当分页选项发生变化时，这将同步分页属性。

// Pagination object
{
  page: number
  itemsPerPage: number
  pageStart: number
  pageStop: number
  pageCount: number
  itemsLength: number
}

您可以找到更多信息here在 Events 下标签。