时间戳

首页 > 解决方案 > Vuetify 编辑 v-data-table

vue.js - Vuetify 编辑 v-data-table

问题描述

再会。我正在尝试编辑我的 v-data-table 以满足我对行和语言的个人需求。我设法编辑了一些字段，但我找不到从“1-50 of 300”中编辑“of”的方法。

我正在阅读文档，但我不知道如何更改它。

v-数据表

这是我当前的 v-data-table 文档：

   <v-data-table
    :headers="headers"
    :items="myItems"
    :search="search"
    no-results-text='LMAO NO DATA'
    rows-per-page-text='Data'
    :rows-per-page-items="[5, 50, 100, {text:'EVERYTHING', value: -1}] "
    class="elevation-3"
   >

编辑：Sejir Ben Ali 的回答是正确的，但如果您出现 eslint 错误，请尝试使用：

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

标签： vue.jsvuetify.js

解决方案

来自文档（插槽：pageText - https://vuetifyjs.com/en/components/data-tables#slot-pagetext）：

您可以使用 pageText 插槽自定义显示范围和总项目的页面文本。

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:items="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
    <template v-slot:pageText="props">
      ITEMS {{ props.pageStart }} - {{ props.pageStop }} OF {{ props.itemsLength }} // Edit this
      // ^this is what you need
    </template>
  </v-data-table>
</template>

推荐阅读