前端如何将接口返回的码值转成对应的中文展示呢?

后端接口只返回码值,那前端如何将码值转成对应的中文展示呢?

项目中后端接口都是将码值返给前端,前端通过公共获取码值的接口然后将其对应转码
以下是举例操作:

 created() {
 //这是公共接口的码值表
    let oneType = [
      {
        value: '01',
        content: '一类',
      },
      {
        value: '02',
        content: '二类',
      },
    ];
  //这是接口接口返回的结果值
    let result = [
      {
        proType: '01',
      },
      {
        proType: '02',
      },
    ];
   //调用转码方法
    result.forEach((item) => {
      item.proName = this.getCode(oneType, item.proType);
    });
    console.log('result', result);
  },
  methods: {
  //前端转码方法
    getCode: (codeInfo, codeValue, isMult = false) => {
      if (!codeInfo) {
        return codeValue;
      }
      if (!codeValue) {
        return '';
      }
      if (isMult) codeValue = isMult ? codeValue.split(',') : codeValue;
      let codeName = '',
        codeValues = [];
      for (let i = 0; i < codeInfo.length; i++) {
        if (Array.isArray(codeValue)) {
          for (let j = 0; j < codeValue.length; j++) {
            if (codeValue[j] === codeInfo[i].value) {
              codeValues.push(codeInfo[i].content);
            }
          }
        } else {
          if (codeValue === codeInfo[i].value) {
            codeName = codeInfo[i].content;
            break;
          }
        }
        codeName = codeValues.join(',');
      }
      return codeName == '' ? codeValue : codeName;
    },
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/554036.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Springboot+Vue项目-基于Java+MySQL的企业客户管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

数据结构中的顺序表的删除和查找

对于顺序表&#xff0c;它包括&#xff1a;初始化&#xff0c;取值&#xff0c;查找&#xff0c;插入&#xff0c;以及删除。接下来就讲一讲删除和查找。 删除&#xff1a;它包括头删和尾删&#xff0c;为什么顺序表中要用到删除呢&#xff1f;按我的理解就是&#xff1a;为插入…

SRIO系列-基本概念及IP核使用

参考&#xff1a;串行RapidIO: 高性能嵌入式互连技术 | 德州仪器 SRIO协议技术分析 - 知乎 PG007 目录 一、SRIO介绍 1.1 概要 1.2 SRIO与传统互联方式的比较 1.3 串行SRIO标准 1.4 SRIO层次结构&#xff1a; 1.4.1 逻辑层 1.4.2 传输层协议 1.4.3 物理层 二、Xilinx…

内网隧道技术总结

隧道技术解决的是网络通信问题&#xff0c;因为在内网环境下&#xff0c;我们不同的内网主机管理员会进行不同的网络配置&#xff0c;我们就需要使用不同的方式去控制我们的内网主机。隧道技术是一个后渗透的过程&#xff0c;是可以是我们已经取得了一定的权限&#xff0c;在这…

【Visual Studio 2012中文版】下载安装以及使用方法

文章目录 前言一、下载安装包二、安装步骤1.双击VS2012_ULT_chs.iso文件打开2.双击vs_ultimate.exe打开安装程序3.选择要安装的功能4.软件正在安装&#xff0c;请耐心等待10分钟5.安装成功&#xff0c;点击“启动”6.激活码&#xff08;产品密钥&#xff09; 三、VS2012使用&am…

软考 系统架构设计师系列知识点之大数据设计理论与实践(10)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之大数据设计理论与实践&#xff08;9&#xff09; 所属章节&#xff1a; 第19章. 大数据架构设计理论与实践 第3节 Lambda架构 19.3.5 Lambda架构优缺点 1. 优点 &#xff08;1&#xff09;容错性好 Lambda架构为大数…

HTML:Form表单控件主要标签及属性。name属性,value属性,id属性详解。表单内容的传递流程,get和post数据传递样式。表单数据传递实例

form表单 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &…

Vue源码解读学习

Vue源码 观察者模式 & 发布订阅 观察者模式&#xff1a;中心一对多 系统单点间的灵活和拓展&#xff08;广播的方式&#xff09; 发布订阅&#xff1a;将注册列表遍历发布给订阅者 initInject initState initProvide他们挂载顺序为什么这样设计&#xff1f; initstate…

【春秋云镜】CVE-2023-43291 emlog SQL注入

靶场介绍 emlog是一款轻量级博客及CMS建站系统&#xff0c;在emlog pro v.2.1.15及更早版本中的不受信任数据反序列化允许远程攻击者通过cache.php组件执行SQL语句。 不感兴趣的可以直接拉到最后面&#xff0c;直接获取flag 备注&#xff1a;没有通过sql注入获取到flag&…

C语言 【基础语法】

一、编程环境搭建 编译器&#xff1a;gcc 集成开发环境&#xff1a;vscode 1.1 安装vscode 1.2 设置中文包 插件 1.3 设置C/C扩展 安装 C/C Compile Run extension 和 C/C Extension Pack 扩展 二、基础语法 2.1 第一个c语言程序 2.2 数据类型 2.2.1 变量的语法(重点) …

RK3588 Android13 TvSetting 中增加 Usb 模式 Host/OTG 切换

前言 电视产品,客户要求在设置中设备偏好设置子菜单下增加一个USB模式切换菜单,一开始准备直接开整。但发现在开发者选项里就已经包含了一个USB模式 菜单了,只是没有 OTG HOST 这两选项,那就把这个菜单挪出来再增加一下就完事了,开整。 客户提供对比机图 效果图 framew…

OpenCV从入门到精通实战(六)——多目标追踪

基于原生的追踪 使用OpenCV库实现基于视频的对象追踪。通过以下步骤和Python代码&#xff0c;您将能够选择不同的追踪器&#xff0c;并对视频中的对象进行实时追踪。 步骤 1: 导入必要的库 首先&#xff0c;我们需要导入一些必要的Python库&#xff0c;包括argparse、time、…

Redis从入门到精通(十四)Redis分布式缓存(二)Redis哨兵集群的搭建和原理分析

文章目录 前言5.3 Redis哨兵5.3.1 哨兵原理5.3.1.1 集群的结构和作用5.3.1.2 集群监控原理5.3.1.3 集群故障恢复原理 5.3.2 搭建哨兵集群5.3.3 RedisTemplate5.3.3.1 搭建测试项目5.3.3.2 场景测试 前言 Redis分布式缓存系列文章&#xff1a; Redis从入门到精通(十三)Redis分…

回文链表题解

题目&#xff1a;回文链表 分析 这道题目标签为简单题&#xff0c;但是如果要实现下面的进阶过程不是很简单。 拿到题目一般来说就是赶时间&#xff0c;没有要求的情况下直接使用一个列表存储所有的数值&#xff0c;然后判断这个列表是否满足回文&#xff0c;这个思路是比较简…

【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 投票管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

IO引脚服用和映射

什么是端口复用 STM32F4 有很多的内置外设&#xff0c;这些外设的外部引脚都是与 GPIO 复用的。也就是说&#xff0c;一个 GPIO如果可以复用为内置外设的功能引脚&#xff0c;那么当这个 GPIO 作为内置外设使用的时候&#xff0c;就叫做复用。在芯片数据手册或STM32F4XX参考手…

传感器融合 | 适用于自动驾驶场景的激光雷达传感器融合项目_将激光雷达的高分辨率成像+测量物体速度的能力相结合

项目应用场景 面向自动驾驶场景的激光雷达传感器融合&#xff0c;将激光雷达的高分辨率成像测量物体速度的能力相结合&#xff0c;项目是一个从多个传感器获取数据并将其组合起来的过程&#xff0c;可以更加好地进行环境感知。项目支持 ubuntu、mac 和 windows 平台。 项目效果…

ASP.NET基于TCP协议的简单即时通信软件的设计与实现

摘 要 即时通信(Instant Message)&#xff0c;由于其具有实时性、跨平台性、成本低、效率高等优点而受到广泛的使用。设计并实现一个能够处理多用户进行实时、安全的即时通信系统具有较强的现实意义。即时通信的底层通信是通过SOCKET套接字接口实现的。当前的主流UNIX系统和微…

Android --- Activity

官方文档-activity Activity 提供窗口&#xff0c;供应在其中多个界面。此窗口通常会填满屏幕&#xff0c;但也可能小于屏幕并浮动在其他窗口之上。 大多数应用包含多个屏幕&#xff0c;这意味着它们包含多个 Activity。通常&#xff0c;应用中的一个 Activity 会被指定主 Ac…

Linux数据库自动备份 - 定时任务发到百度云盘、坚果云、邮箱附件

前言 1. 坚果云的webdav云盘最好&#xff01; &#xff08;免费账号每月1G上传流量&#xff09; 2. 不建议数据库备份文件发送到SMTP邮箱&#xff0c;因为对方服务器非常容易当做垃圾邮件处理&#xff0c;而且发信的SMTP账号会被封禁&#xff08;实测163发到QQ邮箱被封&…
最新文章