vxe-table国际化

在使用vxe-table时需要用到国际化

• vxe-table组件国际化
• 自定义部分

那么怎么配置呢？

1、安装vue-i18n

npm i -S vue-i18n

2、新建lang文件夹

目录结构

• index.js

i18n基本配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 引入vxe-table的组件国际化
import zhCN from 'vxe-table/lib/locale/lang/zh-CN.js'
import enUS from 'vxe-table/lib/locale/lang/en-US.js'

// 自定义部分
import zhLocale from './zh'
import enLocale from './en'

Vue.use(VueI18n)

const messages = {
    zh: {
        ...zhLocale,
        ...zhCN
    },
    en: {
        ...enLocale,
        ...enUS
    }
}

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

export default i18n

• zh.js
  中文自定义

export default {
    student: {
        name: '测试',
        age: '9',
        sex: '男'
    }
}

• en.js
  英文自定义

export default {
    student: {
        name: 'test',
        age: '9',
        sex: 'woman'
    }
}

3、在main.js中，vxe-table配置i18n

import Vue from 'vue'
import App from './App.vue'

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

// 国际化
import i18n from '@/lang'

VXETable.setup({
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args),
  // 可选，i18n自定义部分，对参数中的列头、校验提示..等进行自动翻译
  translate(key, args) {
    return i18n.t(key, args)
  }
})
Vue.use(VXETable)

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

关键代码

VXETable.setup({
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args),
  // 可选，i18n自定义部分，对参数中的列头、校验提示..等进行自动翻译
  translate(key, args) {
    return i18n.t(key, args)
  }
})

自定义部分使用方式

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

关键代码

title="student.name"

如果本文对你有帮助，请点个赞吧！