如何在Vuetify中修改`Items per page`文本内容？

看起来你是把footer props的对应关系搞反啦！让我帮你梳理一下正确的配置方式：

1. 纠正Props对应关系 #

你要修改的**“items per page”文本**，对应的是footer-props里的items-per-page-text属性，但你的代码里把它绑定到了rowsPerPage的翻译值，反而把负责显示分页范围（比如“1-10 of 50”）的page-text绑定到了itemsPerPage，这就导致目标文本没被正确替换。

修正后的代码（Vuetify 2.x版本）：

<v-data-table
  :items-per-page="itemsPerPage"
  :footer-props="{
    'items-per-page-text': $i18n.t('itemsPerPage'), // 这里对应“items per page”文本
    'page-text': $i18n.t('rowsPerPage') // 这里对应分页范围的描述文本
  }"
  :headers="headers"
  :items="items"
>

注意：Vue模板里不需要加this.，直接使用$i18n.t()即可。

2. Vuetify 3.x版本适配 #

如果你使用的是Vuetify 3，写法会有所不同，3.x版本更推荐通过插槽自定义footer，同时props改为驼峰命名：

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

3. 最后检查i18n配置 #

别忘了确认你的i18n资源文件中，itemsPerPage对应的翻译文本确实是你想要替换的内容（比如中文的“每页条目数”），避免键值对应错误导致不生效。

内容的提问来源于stack exchange，提问作者Mina