前端根据后端返回的code查字典表显示name

太过爱你忘了你带给我的痛 2022-09-11 07:29 31阅读 0赞

问题：请求回来的数据列表只有字典表的对应编码，需要前端进行查字典表来装换为字典表对应的值！  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_20_color_FFFFFF_t_70_g_se_x_16]  
解析：list1是请求回来的数据列表，其中list.ids为后台的问题类型编码，所以需要拿list.ids来获取字典表的name来绑定！所以我们可以写一个专门转换的方法来处理！

#### 为单值时 ####

当为一个值时比较好处理，直接判断进行循环遍历return 回name;

getCategoryName(code) { 
                if (!code) { 
                  return null;
                }
                for (let i = 0, len = this.dictionariesList.length; i < len; i++) { 
                  let item = this.dictionariesList[i];
                  if (item.code == code) { 
                    return item.name;
                  }
                }
                return null;
          },

#### 为多值时 ####

这里遇到接收的一个字符串可能是有多个以逗号隔开的值！所以相对一个值时需要多一层遍历，并且需要匹配逗号！

getCategoryName(code) { 
              if (!code) { 
               return null;
              }
              let code_arr = code.split(',');
              let name = '';
              for (let i = 0, len = this.dictionariesList.length; i < len; i++) { 
               let item = this.dictionariesList[i];
                for (let q = 0;q < code_arr.length;q++) { 
                 if (item.code == code_arr[q]) { 
                  name += item.name
                  if (i != code_arr.length - 1) { 
                              name += ','
                       }
                 }
                }
              }
              return name;
             },

视图里卖弄直接插值调用方法转换：

<div class="content">
           <div><span>*</span><span>驳回问题类型</span></div>
           <span>{ { getCategoryName(items.audit_reject_type)}}</span>
     </div>

结果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_11_color_FFFFFF_t_70_g_se_x_16]  
总结：说实在话，这应该是后端处理的，直接返回来的！硬生生给我处理了！不过其中学到了很多，默默发誓：下次不处理了！  
![个人博客小程序][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0390ae967efe4977bba55295e9b739a3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/60797ddb87cb4c2cb7f43a76351e63bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARnJvbnQg5bCP5oCd_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/83ea7ba579524f28b8f285b0de4a3604.png