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

前言

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

枚举类型

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

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

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

map定义字典的方式

1.在data中定义变量

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

2.界面中使用的方式

<div>{{status['DRAFT']}}</div>

其中，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.界面中使用

<p>{{sex}}</p>

过滤器

1.data中定义变量

status: "DRAFT"

2.定义过滤器

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

3.界面中显示

<p>{{status | capitalize}}</p>

总结

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