ant-design table 组件 列头名称 国际化i18n问题 解决

话不多说，直接进入主题。

ant-design 在使用它的table组件的时候，不知道你们有没有需求说需要翻译列表头部名称：

在切换语言的时候，table的列头名称 并不会同步更换对应语言， 而是需要你重新laod或者切换页面之后才生效。

官方文档没有涉及相关问题的解决办法，其实很明显原因就是切换语言的时候，表头的i18n全局指令变量没有被触发：

这是正常使用ant-design table 组件时， 给列的title赋值的方法： 

 columns: [
        {
          title: this.$t('general.serial'),
          width: 120,
          scopedSlots: { customRender: 'serial'}
        }
]

columns是table所有列的数据的数组变量，title是给列头名称的固定属性，因为它会对应一个name为title的slot。

国际化之后，使用全局i18n指定 this.$t 去翻译对应列的词条，这个时候问题就来了，切换语言并不会触发其自动翻译，需要重新load 当前页面或者你切到别的页面，再返回该页面，才能拿到对应语言的词条。

 

所以，怎么解决这个问题？

通过官方文档，看到table colums的title属性的类型可以是string/slot。 string的话就是上面我们采用的方法，所以，此时是不是可以考虑使用slot的方式，给title传值，然后将翻译的工作交回到html中。

ok, 我们开始尝试：

columns: [
        {
          slotName: 'general.serial',
          width: 120,
          scopedSlots: { customRender: 'serial', title: 'general.serial' }
        }
]

在scopedSlots中添加title的slot名称，这里直接把对应国际化词条的完整路径赋给它，为什么这么做？继续往下看：

我再给每一列添加一个名叫slotName的属性，它的值也是对应国际化词条的完整路径。

接着在<a-table>组件中定义对应的slot，用来展示column的title。

这个时候，你会有个问题跑进你的脑子里：

卧槽！这样我还得在html中加入每一列的slot，因为每个slot名称都不一样，这条html又要增加很多代码了。

且慢，还记得上面我给每一列增加了一个slotName属性吗，而且它的值和title的slot name 是一样的。

所以，一个循环就可以搞定了。请看：

<template v-for="(item, index) in columns" :slot="item.slotName">
   <span :key="index">{{ $t(item.slotName) }}</span>
</template>

每一列的slotName就是刚刚在columns中定义的slotName的值，而且这个值恰好又是该列的title对应的国际化词条路径，所以直接在这里 $t(item.slotName) 就可以翻译每一列的title了。

这个问题也就完美的解决了。

 

总结：

1，官方文档要看仔细；

2，在一条路行不通的时候不一定非要纠结这条路错在哪，往往可能就是这条路是不通的， 你再怎么钻牛角尖它也到不了你想到达的地方。也许你可以再修一条路弯过去，或者把被堵住的地方挖开，但是这样的代价不一定你能承担的。而且，往往就是你把障碍挖开了，接下来还有更多你没想到的障碍。所以，及时的换一条路，可能就轻松的到达了。