Element UI 实现字典翻译

小白记录下element ui的学习过程。

这样的一个页面，需要将所有控件的label名称包括table的表头，都改成可根据字典翻译的

 这是原本的写法

首先，需要从数据库中将字典的对象查出来 

在页面渲染之前将数据查出来保存在前端，最好的方法是登录的时候进行缓存，我这里是偷懒

增加Labels变量，将数据库中的字典保存起来

 

通过接口得到数据，保存到Labels对象中，注意，这里需要进行转换，接口通过数据库返回的值是一个Array对象，并且其中每个对象的key是UserLabelName，值是LabelValue。我们需要将Array中的每一个对象的key转换成一个对象的属性，Array对象的value转成对象中的值。

例如：接口返回数据库查询到的结果集是[{'UserName':'用户名'},{'Serach':'查询'},{'LogLevel':'日志等级'}]，转换成{'UserName':'用户名','Serach':'查询','LogLevel':'日志等级'}.

这样vue才会自动找到对应的值进行映射

 

然后我们需要修改控件的label

这里面用三元运算符避免数据库中没有查到数据，label就被空着不好看，就默认一个值了

上面是普通控件的用法，Table的也是类似，但是有点特殊的地方，Tabel控件的表头在beforeCreate事件之前就渲染了，所以自动映射的时候获取的还是空值，我们需要在查询完成之后重新渲染Table。我们在Table属性中，增加一个:key="timeStamp"，然后在接口返回值的时候改变timeStamp的值，就会自动重新渲染Table啦，代码如下

这样就完成啦，最终修改数据库中的value，页面的值就会跟着变化了。菜鸟的记录学习过程，大神勿喷