【vue】前端根据后端返回的code码查字典表展示文本

有时候请求回来的数据列表只有字典表的对应编码，需要前端从字典表找到对应的文本并展示

如果不想写一大堆循环或者if的话可以用以下的方法来写

下边为模拟的数据

//模拟的数据
let list = [
  {
    time: "2022/11/17",
    name: "A-A-A",
  },
  {
    time: "2022/11/17",
    name: "B-B-B",
  },
  {
    time: "2022/11/17",
    name: "C-C-C",
  },
];

这里的name并不是真正的name 而是后端返回的code 我们需要通过字典表的数据来展示对应的name

//模拟的字典表
let obj = {
  'A-A-A': "我是A",
  'B-B-B': "我是B",
  'C-C-C': "我是C",
};

可以看到这个字典表是个对象，而对象取值的话只需要选择对象的key即可

这里是展示的HTML结构

只需在插值表达式里调用我们过滤的方法，让他返回字典表里对应key的值
  <div v-for="item in list" >
    {{ filterFn(item.name) }}
  </div>

let filterFn = (key) =>{
  return obj[key]
}

大致思路就是这样了