vuejs Iview 表格表头多语切换

原创 zxsclq 随笔 前端基础 730阅读 2018-02-23 18:01:47 举报

多语言切换

最近的工作当中有个任务是做国际化。本来以为这东西挺复杂的(我之前没做过,大家别喷),然后网上看了一下相关的案例,结果发现,没那么麻烦。公司做的软件,是基于iview框架的页面效果如下。


整个做起来发现,这个表格表头的语言切换,比较的麻烦,查了好久,没什么结果,弄了好久终于给怼出来了。

这边多语用到了Vue-i18n,首先简单说一下Vue-i18n的用法(这个网上都一样,容我抄一下)

预设完毕,然后再common/lang文件目录下,新建两个中英文对应的相关文件分别为zh_CN.js和en_US.js。
文件对应的内容,如下(我这边随便写两个):

页面上使用方式如下

语言切换的时候,我这边用的是一个下拉选框

简单应用实现就是上边的方式。因为我这边,用的是单页面应用,所以这个下拉选框会写在公共部分。按照道理,写在公共部分,该切换的时候照常切换,然后并不是。

iview表头切换

用iview里边的表格的时候,他只会显示页面初始化的时候的语言,所以我们需要想办法给他赋值。iview表格我这边就不写用法,我们用他的方式生成表格的时候,会发现,表头不会跟着语言一起切换

当时想了各种办法,这个表头一直都无法切换,我第一张图片表格里边的按钮都能切换,这边头硬是换不过去。然后我就想了一个监听的办法,用父子组件双向绑定的形式传公共部分选择的语言之值。
官网其实给了一个很简单的例子,如果在同一个页面上,切换语言的时候,我们只需要点击事件,然后给这个表头的数组,重新赋值就行。

但是,我们如果,下拉选框写在公共部分,子页面就必须检测到这个语言值发生了改变,从而触发表头重新赋值的这个事件。这边用的是父子组件的双向绑定

ok,大功告成,这就是这几天踩的坑。如果大家有更好的建议,欢迎留言交流。(没仔细检查,有错别字,别吐槽)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复