前端将后端返回的数字(英文字母),转成对应的文字进行显示

您所在的位置:网站首页 e站的标签改为中文 前端将后端返回的数字(英文字母),转成对应的文字进行显示

前端将后端返回的数字(英文字母),转成对应的文字进行显示

2023-07-19 17:00| 来源: 网络整理| 查看: 265

前言

类似于省市区,状态,性别之类的可以枚举出来的变量,一般情况下数据库中存储的是其对应的value值,像省市区联动的话,前端界面中显示的是省市区的名字,但是接口的入参一般是对应的code码;如果界面中需要状态的话,类似于我这种的稿件状态:草稿、待审批等,接口返回的不是草稿这样的文字,而是DRAFT这样的英文标识。那问题就来了,前端如何将后端返回的数字或英文字母,转成对应的文字进行显示呢?

枚举类型

后端返回的数据中有英文标识,具体标识如下:

"status": { "DRAFT": "草稿", "APPROVAL_PENDING": "待审稿", "RE_APPROVAL_PENDING": "重投待审稿", "APPROVE": "审稿通过等待编辑部处理" },

在之后请求接口中,如果我遇到了DRAFT,我就应该在前端显示草稿。

map定义字典的方式

1.在data中定义变量

status: { DRAFT: "草稿", APPROVAL_PENDING: "待审稿", RE_APPROVAL_PENDING: "重投待审稿", APPROVE: "审稿通过等待编辑部处理" }

2.界面中使用的方式

{{status['DRAFT']}}

其中,DRAFT是后端返回的内容,根据该内容去找status中对应的值。

三元表达式

该方式一般适用于只有两种情况的,非一即二的这种,如下:

sex == '1' ? '男' : '女'

在这里有多种情况,如果我用了map方法,依次处理后端返回的数据:

this.tableData.map(item => { if (item.status == "DRAFT") { item.status = "草稿"; } else if (item.status == "APPROVAL_PENDING") { item.status = "待审批"; } else if (item.status == "APPROVE") { item.status = "审批通过等待编辑部处理"; } else { item.status = "编辑部已拒稿"; } return item; }); 计算属性

1.定义计算属性

computed: { sex: function() { return 1 == "1" ? "男" : "女"; // 第一个 1 换成后端返回的内容 } }

2.界面中使用

{{sex}} 过滤器

1.data中定义变量

status: "DRAFT"

2.定义过滤器

filters: { capitalize: function(value) { if (value == "DRAFT") return "草稿"; } },

3.界面中显示

{{status | capitalize}} 总结

总结下来,我觉得第一种方式更为简洁,因为后续的三种方式,判断的内容一多的情况下,不可避免的会涉及到多层if的问题,但是具体使用哪个还是需要结合自己的业务需求的。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3