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

川长思鸟来 2023-02-18 04:27 8阅读 0赞

# 前言 #

类似于省市区，状态，性别之类的可以枚举出来的变量，一般情况下数据库中存储的是其对应的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.界面中使用

# 过滤器 #

1.data中定义变量

status: "DRAFT"

2.定义过滤器

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

3.界面中显示

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

# 总结 #