vxe-table 如何定义国际化

官网例子：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/i18n

先引入i18nnpm install vue-i18n
创建 src/i18n/index.js

 import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    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', // 这里可更改语言，改成enUS 则为英文
      messages,
    })

    export default i18n

3、挂载vxetable上

        import Vue from 'vue'
        import i18n from './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'

        VXETable.setup({
          // 对组件内置的提示语进行国际化翻译
          i18n: (key, args) => i18n.t(key, args)
        })

        Vue.use(VXETable)

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

重点：我们按照官网上的例子很容易将文字改为想要的语言，但是如何做到动态切换，官网并没有叫我们如何做。而上面的那种挂载方式，只会执行一遍，因为vue是单页面应用，如果你做成全局的更改，可以将用户选择的语言设置在localstage内，然后在上面的index.js 'locale: ‘zh_CN’, // 这里可更改语言，改成enUS 则为英文’设置取值即可，用户切换语言之后，我们把新语言放在localstage内紧着这刷新浏览器即可。这是全局的方式
如果我想做局部的怎么做，下面这个例子，是以路由的方式动态切换的，业务场景：我有某几个菜单页面为英文的，为了给老外看，其余全是中文的，我在中文页面和英文页面来回的切换，上面的例子就不行了，因为它只执行一遍。只会执行第一次的语言。下面的例子叫你如何动态的改国际化语言
1、先引入i18n npm install vue-i18n
2、找到定义router的beforeEach 的文件，在路由切换时做更改

import router from './router'

// vxe-table 国际化配置
import VueI8n from 'vue-i18n'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US'

        VXETable.setup({
          // 对组件内置的提示语进行国际化翻译
          i18n: (key, args) => i18n.t(key, args)
        })
const messages = {
          zh_CN: {
            ...zhCN
          },
          en_US: {
            ...enUS
          }
        }

router.beforeEach((to, from , next) => {
  // 在这里我们根据路由的判断，告诉组件接下来用什么语言显示
  //动态国际化
  let i18n = 'zh_CH'
  if(to.fullPath.indexOf(['/csb/']) !== -1) {
    i18n = new VueI18n({
      locale: 'en_US'
      messages
    })
  } else {
    i18n = new VueI18n({
      locale: 'zh_CN'
      messages
    })
  }
  VXETable.setup({
    i18n: (key, args) => i18n.t(key, args)
  })

  // 你的路由监听代码
})