Блог

Например: Показано в документации : Документация Vuetify

У нас «Элементы на странице» отображаются на английском языке. Если я хочу изменить текст или просто выбрать язык для его перевода, например, на французский, как я могу это сделать?

Несмотря на то, что это явно не указано, locale prop, похоже, присутствует во всех компонентах vuetify, так что вы можете его использовать. Смотрите мой пример.

src/components/my-datatable.vue

 <template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    locale="fr"
  ></v-data-table>
</template>
  

src/plugins/vuetify.js

 import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

import fr from 'vuetify/src/locale/fr.ts'

Vue.component('my-component', {
  methods: {
    changeLocale () {
      this.$vuetify.lang.current = 'fr'
    },
  },
})

export default new Vuetify({
  lang: {
    locales: { fr },
    current: 'fr',
  },
})
  

 <v-data-table :rows-per-page-items="rowOptions" :rows-per-page-text="rowPageText">           
</v-data-table>

  

 data () {
   return {
       rowOptions: [
            5,
            15,
            25,
            { text: "$vuetify.dataIterator.rowsPerPageAll", value: -1 }
        ],
        rowPageText: "Objets par page:"
    }
}
  

Или вы можете захотеть проверить документацию по интернационализации

Обновленный ответ => 2022

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

(примечание: я настроил @nuxtjs / i18n и имею доступ к ‘this.$ t ()’ во всем моем приложении. вы можете свободно использовать любой другой текст вместо них.)

для заголовков это просто:

 <v-data-table
  :headers="headers"
>

 data() {     
   headers: [
     { text: this.$t('id'), value: 'id' },
     { text: this.$t('status'), value: 'state' },
     { text: this.$t('title'), value: 'title' },
     { text: this.$t('price'), value: 'amount' },
     { text: this.$t('date'), value: 'time' },
     { text: this.$t('gateway'), value: 'gateway' },
   ]
 }
  

и для реквизитов нижнего колонтитула:

 <v-data-table
  :footer-props="footerProps"
>

data() {
  footerProps: {
      disableItemsPerPage: true,
      itemsPerPageText: this.$t('itemsPerPageText'),
      itemsPerPageAllText: this.$t('all'),
  }
}
  

для меня этого было достаточно, потому что моя таблица была довольно простой.

дополнительные реквизиты нижнего колонтитула см. в документации: https://vuetifyjs.com/en/api/v-data-footer/#props