vue.js - Vuetify 更改 v-data-table 页脚中每页文本的行数

Question

我正在使用 Vuetify 的 v-data-tables 和....

我想更改此文本：

我已经添加了这段代码，但它不起作用：

谢谢！

Answer 1

你可以使用'items-per-page-text':'products per page' ：

  <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      item-key="name"
      class="elevation-1"
      :footer-props="{
        showFirstLastPage: true,
        firstIcon: 'mdi-arrow-collapse-left',
        lastIcon: 'mdi-arrow-collapse-right',
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus',
           'items-per-page-text':'products per page'
      }"
    ></v-data-table>

请检查这个example

Answer 2

vuetify 2.X 的正确属性是items-per-page-text：

<v-data-table
      :footer-props="{itemsPerPageText: 'Rows count'}"
></v-data-table>

Answer 3

<template v-slot:[`footer.page-text`]="items"> 
  {{ items.pageStart }} - {{ items.pageStop }} de {{ items.itemsLength }}
</template>