Vue3+Vuetify3自定义数据表格每页条数文本及选项

在Vuetify3中，你可以通过两个内置属性直接实现你的需求：

1. 修改“item per page”显示文本 #

使用items-per-page-text属性替换默认提示文本，比如改成“每页显示”。

2. 设置自定义每页条数选项 #

使用items-per-page-options属性定义自定义选项，数组元素可以是数字（直接对应每页条数），也可以是包含text和value的对象（用于自定义显示文本，比如“全部”）。当value设为-1时，Vuetify会自动识别为显示全部数据。

修改后的完整代码 #

<v-data-table
  v-model:items-per-page="itemsPerPage"
  v-model="selected"
  :headers="headers"
  :items="outilFiltre"
  :search="filtre_recherche"
  @click:row="clickOutil"
  item-value="name"
  show-select
  class="elevation-1 mb-4 pt-3 pb-3"
  // 新增的自定义配置
  items-per-page-text="每页显示"
  :items-per-page-options="[5, 10, 20, { text: '全部', value: -1 }]"
>
</v-data-table>

补充说明 #

• 若不需要自定义“全部”的显示文本，直接传纯数字数组即可，比如[5, 10, 20]
• items-per-page-text支持动态绑定，多语言场景下可以结合国际化工具（如$t('table.itemsPerPage')）使用

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