用字典处理返回的字段和需要显示的字段问题

问题来源

在写业务页面的时候遇到了一个问题，具体如下

需要这样一个页面，但是后台返回的数据的数据的key是英文，只能预先将要显示的字段写死在页面里再通过obj.key的方法显示出来，如果只有一个这样的页面这样做也可以，但是相同样式的页面有好几个，这样会增加代码的冗余，并且不方便维护。

产生的原因

后台可能因为规范或者条件限制的原因并不能给返回的数据携带更多的信息，所以这时候需要前端来处理一下

解决方法

首先想到的是将页面抽成一个组件来使用，但是用上述方法实现的页面抽象还不够，所以需要对页面的渲染逻辑进行处理。使得能够把页面抽象成组件
问题：把后台的字段名映射成前端需要显示的文字
处理方法：

1. 前端准备一个和后端名称映射的字典

   
   字典
   后台返回的数据

2. 将字典映射到页面

   
   映射方法.png
   

   原理：使用v-for函数遍历数组可以获取到对象的value，对象的key，对象在数组中的索引，再通过data的key访问字典中的value.

到这里就可以通过给组件传递需要显示的数据和对应的字典就可完成组件的封装了