Vue3+I18n在<script setup>中实现Quasar表格列标签翻译

方法1：使用Vue I18n的useI18n组合式钩子 #

在<script setup>中先导入useI18n钩子，解构出t翻译函数，直接在columns数组中使用即可：

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const columns = [
  {
    label: t('table.columns.name'),
    field: 'name',
    sortable: true
  },
  {
    label: t('table.columns.email'),
    field: 'email'
  }
]
</script>

如果需要支持语言切换时自动更新列标签，把columns放到computed中即可（注意要在computed回调内调用t）：

<script setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

const { t } = useI18n()

const columns = computed(() => [
  {
    label: t('table.columns.name'),
    field: 'name',
    sortable: true
  },
  {
    label: t('table.columns.email'),
    field: 'email'
  }
])
</script>

方法2：利用Quasar表格插槽动态渲染标签 #

如果不想在columns数组中处理翻译，也可以通过Quasar表格的header-cell-*插槽，在模板中直接使用$t：

<template>
  <q-table :columns="columns" :rows="rows">
    <template #header-cell-name>
      <span>{{ $t('table.columns.name') }}</span>
    </template>
    <template #header-cell-email>
      <span>{{ $t('table.columns.email') }}</span>
    </template>
  </q-table>
</template>

<script setup>
// columns仅定义字段核心配置，label可留空
const columns = [
  { field: 'name', sortable: true },
  { field: 'email' }
]
</script>

方法3：检查I18n实例注入是否正确 #

如果上述方法无效，先确认I18n插件已正确注册到Vue实例中。在resources/js/app.js中需确保有类似配置：

import { createApp, h } from 'vue'
import { createI18n } from 'vue-i18n'
import { createInertiaApp } from '@inertiajs/vue3'
import { Quasar } from 'quasar'

// 导入语言文件
import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  locale: 'zh',
  messages: { en, zh }
})

createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(Quasar)
      .use(i18n) // 必须注册I18n实例
      .mount(el)
  },
})

常见排查点 #

• 若使用Laravel官方的laravel-vue-i18n包，导入方式为import { useI18n } from 'laravel-vue-i18n'，用法与原生Vue I18n一致。
• 之前computed失败大概率是因为未在回调函数内调用t，或是没有正确解构useI18n返回的t函数。

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