VXE-Table融合多语言

VXE官方的多语言教程是这样的：

vxe-table v4https://vxetable.cn/#/table/start/i18n但是，系统中已经有自己的多语言了怎么办？

下面是自定义的i18n根VXE的融合过程：

1、引入插件

 npm install vue-i18n

2、创建i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
//this.$i18n.locale // 通过切换locale的值来实现语言切换
//window.vm.$i18n.t('lang.我的网站名') 主要为了在index页面使用多语言
//html {
   {$t('lang.test')}}
//js调用this.$t('lang.test')
//自己的框架里面所用的多语言
function initI18n() {
    Vue.use(VueI18n)
    let i18nOptions = {
        locale: 'CN',    // 语言标识
        fallbackLocale: 'CN',//没有英文的时候默认中文语言
        silentFallbackWarn: true,//抑制警告
        messages: {
            'CN': require('./locale/zh.js'),   // 中文语言包
            'US': require('./locale/en.js')    // 英文语言包
        }
    }
    return new VueI18n(i18nOptions)
}
//获取系统定义的语言
function getLangs() {
    return [
        { Key: "CN", Name: "简体中文" },
        { Key: "US", Name: "English" },
    ];
}

export default{ initI18n, getLangs }

3、多语言文件

这里把vxe的文件拷贝进来就行

 

 4、main.js里面引用

//多语言
import langs from '@/lang/i18n.js'
const i18n = langs.initI18n();

//vxeTable
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
// 对组件内置的提示语进行国际化翻译
VXETable.setup({i18n: (key, args) => i18n.t(key, args)})
Vue.use(VXETable)


/* window.vm.$i18n.t('lang.我的网站名') 主要为了在index页面使用多语言 */
window.vm = new Vue({
  el: '#app',
  router, store, i18n,
  components: { App },
  template: '<App/>'
})

5、多语言切换功能核心方法

//设置多语言
    setLanguage(lang) {
      // 对组件内置的提示语进行国际化翻译 vxe的
      VXETable.setup({i18n: (key, args) => this.$i18n.t(key, args)})
      //自定义的
      this.$i18n.locale = lang;
      //插件自带的
      switch (lang) {
        case "CN":
          this.locale =
            require("ant-design-vue/es/locale-provider/zh_CN").default;
          break;
        case "US":
        default:
          this.locale =
            require("ant-design-vue/es/locale-provider/en_US").default;
          break;
      }
    },