如何更改 vuetify 中的“每页项目数”文本？

Question

我正在尝试翻译 v-data-table 中每页项目的文本。我已成功翻译 rows per page 文本，但无法更改 items per page 文本。我试过这个：

    <v-data-table
        :items-per-page="itemsPerPage"
        :footer-props="{'items-per-page-text': this.$i18n.t('rowsPerPage'), 'page-text': this.$i18n.t('itemsPerPage')}"
        :headers="headers"
        :items="items"
    >

数据：

    itemsPerPage: 10,

但他们中的任何一个都奏效了。

Answer 1

您可以在 gridOptions 对象中使用 localeText 对象来翻译 ag-grid 相关的 in-built 文本。

官方文档：vue-data-grid localization

gridOptions: {
  localeText: {
    rowsPerPage: I18n.t('rowsPerPage').toString()
  }
}

Answer 2

您可以使用外部分页来更改文本。

      <template>
            <div>
              <v-data-table
                :headers="headers"
                :items="desserts"
                :page.sync="page"
                :items-per-page="itemsPerPage"
                hide-default-footer
                class="elevation-1"
                @page-count="pageCount = $event"
              ></v-data-table>
              <div class="text-center pt-2">
                <v-pagination
                  v-model="page"
                  :length="pageCount"
                ></v-pagination>
                <div class='d-flex align-center'>
        <!--    you can write your text here according to your requirements        -->
                  <span>Items per page </span>
                <v-select
                  v-model="itemsPerPage"
                  :items="perPageValues"
                ></v-select>
                </div>
              </div>
            </div>
    </template>
<script>
  export default {
      data () {
        return {
          page: 1,
          pageCount: 0,
          itemsPerPage: 5,
          perPageValues:[5, 10, 15, 20],
          headers: [
            {
              text: 'Dessert (100g serving)',
              align: 'start',
              sortable: false,
              value: 'name',
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
            { text: 'Carbs (g)', value: 'carbs' },
            { text: 'Protein (g)', value: 'protein' },
            { text: 'Iron (%)', value: 'iron' },
          ],
          desserts: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              iron: '1%',
            },
            {
              name: 'Ice cream sandwich',
              calories: 237,
              fat: 9.0,
              carbs: 37,
              protein: 4.3,
              iron: '1%',
            }
          ],
        }
      },
   }
</script>

如何更改 vuetify 中的“每页项目数”文本？

How to change `Items per page` text in vuetify?

vue.js

vuetify.js