V-data-table 显示总页数

Question

早上好， 我正在使用 v-data-table 在我的项目中创建带有分页的表。 一切正常，我只是想将总页数添加到分页中。 我现在拥有的：

          <v-data-table
            :headers="headers"
            :items="filteredList"
            :items-per-page="7"
            no-data-text="No results"
            :footer-props="{
              itemsPerPageText: 'Items per page:',
              itemsPerPageOptions: itemsPerPages,
              showCurrentPage: true
            }"
          >
          </v-data-table>

问题是，showCurrentPage 仅显示当前页面的数量（在上一页/下一页按钮之间）。是否可以将其更改为： Page 1 of 3?

pagination screenshot

Answer 1

我相信v-data-table 的slot 将替换页面文本。个人没有在这种情况下使用插槽，这个例子不在我的脑海中，但它应该是这样的：

<v-data-table>
  <template v-slot:footer.page-text="{ pageStart, pageStop, itemsLength }">
    {{ pageStart }} of {{ itemsLength }}
  </template>
</v-data-table>

如果该广告位未按预期工作，那么您可以选择为整个页脚创建一个自定义广告位以添加页数。不幸的是，这将替换默认页脚，因此您必须在页脚中重新创建其他元素，例如每页下拉菜单和页面导航中的项目。

<v-data-table>
  <template v-slot:footer="{ props }">
    // Every other footer element
    {{ props.pagination.page }} of {{ props.pagination.pageCount }}
  </template>
</v-data-table>