前端將後端返回的數字(英文字母)，轉成對應的文字進行顯示

前言

類似於省市區，狀態，性別之類的可以枚舉出來的變量，一般情況下數據庫中存儲的是其對應的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的問題，但是具體使用哪個還是需要結合自己的業務需求的。