Vuetify изменить текст Строк на странице текста в нижнем колонтитуле v-data-table

Question

Я работаю с v-data-таблицами Vuetify и....

Я хочу изменить этот текст:

ht tps://s tackru.com/images/6ce059bf1ee7c8520011bb2ba601ae6743a97a2f.png

Я добавил этот код, но он не работает:

ht tps://s tackru.com/images/f747c83c56af616596f93e5b28b33ac35e9d05aa.png

Благодарность!

Answer 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

Answer 2

Правильная опора для vuetify 2.X - количество элементов на странице:

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

Answer 3

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

Answer 4

Лучший способ, который я когда-либо находил, — языковая локализация в конфигурации Vuetify .

      import en from "vuetify/lib/locale/en";
    
export default new Vuetify({
  theme: {
    themes: {
      options: {/*...*/},
      light: {/*...*/},
      dark: {/*...*/},
    },
  },
  lang: {
    locales: { en },
      current: "en",
  },
});

Приведенная выше конфигурация приводит к тому, что все компоненты Vuetify(v-data-table) для языковой локализации.

Answer 5

Очень просто, по крайней мере в версии 3.3.9:

      <VDataTable :pageText="'{0}-{1} de {2}'" />

Answer 6

Из быстрого поиска документации vuetify я не могу найти текстовых строк на страницу, но элементов на текст страницы можно попробовать с элементами на текст страницы?

Answer 7

Чтобы изменить «{start}-{end} {total}, я сделал вот что: (другое решение не сработало)

      <template>
    <v-data-table
        v-model:page="page"
        v-model:items-per-page="itemsPerPage"
        :items-per-page-text="$t('table.itemsPerPage')"
        :page-text="pageText"
></v-data-table>
</template>

<script>
    // Inside component definition
    data() {
        return {
            items: [], // Array to show in the table
            page: 1,
            itemsPerPage: 5,
        }
    },
    computed: {
        pageText(): string {
            const total = this.items.length
            const startInterval = (this.page - 1)*this.itemsPerPage+1
            const endInterval = Math.min(this.page*this.itemsPerPage, total)
            const interval = `${startInterval}-${endInterval}`
            return this.$t('table.pageText', {interval: interval, total:total})
        }
    },
</script>

И в моих файлах перевода у меня есть

ru.json

      {
    "table": {
        "itemsPerPage": "Items per page",
        "pageText": "{interval} of {total}"
    }
}

fr.json

      {
    "table": {
        "itemsPerPage": "Items par page",
        "pageText": "{interval} de {total}"
    }
}