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

Posted 2023-02-22

【中文标题】Vuetify 更改 v-data-table 页脚中每页文本的行数

【英文标题】：Vuetify change text Rows per page text in v-data-table's footer

【发布时间】：2020-09-27 06:55:35

【问题描述】：

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

我想更改此文本：

我已添加此代码，但它不起作用：

谢谢！

【参考方案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

【讨论】：

谢谢！我想改变的另一个词是：'of'。你知道怎么改吗？

有一个名为page-text 的属性默认具有$vuetify.dataFooter.pageText 作为值，但我不知道如何更改它

我一直在阅读有关该属性的信息...如果我实现了它，我会告诉你

谢谢，我正在尝试类似'page-text':'$vuetify.dataFooter.pageText'.replace('of','de') 但没有成功

我明白了！我不得不使用 v-slot footer.page-text 添加另一个模板：''

【参考方案2】：

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

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

【讨论】：

您的解决方案非常适合我，但我仍然有一个部分没有翻译。我有两页，当它应该是“de”（西班牙语）时，我看到了“of”。该主题的属性是什么？

@inane 在你的情况下应该是:footer-props=" pageText: '0-1 de 2'

非常感谢@dreamwalker！

【参考方案3】：

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

【讨论】：

与现有答案建立的方法相比，这种方法有什么好处？

这对我有用，希望对其他人有所帮助。