Ant-design 国际化解决方案记录

实习参与的第一个需求就是页面国际化，看代码觉得贼简单结果一上手bug满天飞，而且一种解决方案往往只适用于一个类型的组件或者数据，换一个类型又得重新想办法……特此记录一下这些解决方案

1. 基本解决方案

参考： www.jianshu.com/p/71e9073df…

项目用的是ant-design-vue + vue-i18n，配置好后将文本替换成{{$t('your name.your key'}}就能解决最基本的页面文字国际化问题，ant组件自带文字会自动进行语言切换。

2. Table表格表头数据解决方案

项目需求的第一个难题，表头的数据是写在data里的，把上面的方法硬塞进表头数据里是不会进行中英切换的，官方给出的解决方法是把数据放进computed中，但项目数据是已经写好了的，我要是瞎挪弄出一堆bug，组里的人估计会把我吊起来打，最后还是用的监听中英按钮切换然后刷新表头数据的方法。

首先要把切换的值传到对应页面里

changeLocale (localeval) {
      this.localeval = localeval
      if (localeval === EN) {
        moment.locale(EN)
        this.$i18n.locale = EN
        this.$bus.$emit('changeLocale', 'en-us')// 组件传值
      } else {
        moment.locale(ZH)
        this.$i18n.locale = ZH
        this.locale = zhCN
        this.$bus.$emit('changeLocale', 'zh-cn')// 组件传值      }
    }

对应页面接受数据：

   mounted() {
      this.$bus.$on('changeLocale', (param) => {
          console.log("接收到的值是",param)
      })
    }

然后写刷新表格数据的方法：

   methods(){      
       init() { 
        this.initTable()
     },
      initTable() {
      const tables = ['tableColumns']
      const allTitle = {
        tableColumns: [
          {
            title: this.$t('title.one'), // 表头对应的数据
          }, 
          {
            title: this.$t('title.two'),
          },
          {
            title: this.$t('title.three'), 
          }, 
          {
            title: this.$t('title.four'),          
          }, 
            ]      
       }      
        for (let i = 0; i < tables.length; i++) {
        const line = tables[i] // 用来寻找对应的数据
        this[line] = allTitle[line]
        }
      }
    }

切换时调用就行了

  mounted() {
    this.$bus.$on('changeLocale', (param) => {
      this.initTable()
    })
    this.init() // 初始化数据
  }

3.带单元格编辑功能的表格解决方案

解决了表头没想到表格里居然还有要翻译的

如果表格是按照ant官网给的写法就很好办了，直接把对应文字替换就行

<a href="javascript:;">{{$t('table.Delete'}}</a>

但是他们把这个字段也写在data里了……于是数据又不会变了，塞得还是html这下$t符完全没用了，只能在刷新数据时用if判断然后输出对应语言了

方法跟上面差不多加个判断就行了

------ 持续更新 ------