vxe-table 国际化的使用、支持多语言 internationalization

vxe-table 国际化的使用、支持多语言 internationalization

先安装 vue-i18n 国际化插件（或者不使用也行，可选的）

npm install vue-i18n

import Vue from 'vue'
import VueI18n from 'vxe-i18n'
import VXETable from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US'

const messages = {
  zh_CN: {
    ...zhCN
  },
  en_US: {
    ...enUS
  }
}

const i18n = new VueI18n({
  locale: 'zh_CN',
  messages,
})

Vue.use(VXETable, {
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args),
  // 如果不使用 vue-i18n 场景，则需要自行转义字符串语法: '{xx}'，例如：
  // i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})

new Vue({ i18n }).$mount('#app')

如果还希望对内容进行翻译，例如：参数中的列头、校验提示…等进行自动翻译（只对支持国际化的有效）

import VXETable from 'vxe-table'

Vue.use(VXETable, {
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args),
  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
  translate: (key, args) => i18n.t(key, args)
})

<vxe-table
  border
  height="600"
  :data="tableData">
  <vxe-column field="name" title="app.body.label.name"></vxe-column>
  <vxe-column field="age" title="app.body.label.age"></vxe-column>
  <vxe-column field="sex" title="app.body.label.sex"></vxe-column>
</vxe-table>