实习参加的第一个需要就是页面国际化，看代码感觉贼简略后果一上手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判断而后输入对应语言了
办法跟下面差不多 加个判断就行了
------ 继续更新 ------