Vue數據格式化，:formatter的使用

本文轉載自查看原文 2021-12-10 14:42 5236

在Vue中使用ElementUi表格，對數據進行格式化處理
1、后端給我返回的格式如下，我要根據他提供的數據，將其轉變為文字：

2、我們可以在需要處理行里，加入:formatter方法，具體代碼如下：

1 <el-table-column prop="protocolType" label="協議類型" :formatter="formatProtocolType" >
2 </el-table-column>

3、在js中進行格式處理
既可以使用if判斷，也可使用switch case判斷，亦或使用三元表達式

switch case:

 1 // 處理協議類型
 2 formatProtocolType(row) {
 3 　　let type = row.protocolType;
 4 　　switch (type) {
 5 　　　　case 1:
 6 　　　　　　type = "普通";
 7 　　　　　　break;
 8 　　　　case 2:
 9 　　　　　　type = "移動NB協議";
10 　　　　　　break;
11 　　　　case 3:
12 　　　　　　type = "LORA";
13 　　　　　　break;
14 　　　　case 4:
15 　　　　　　type = "電信NB協議";
16 　　　　　　break;
17 　　　　case 5:
18 　　　　　　type = "loraWan";
19 　　　　　　break;
20 　　　　case 9:
21 　　　　　　type = "其他";
22 　　　　break;
23 　　}
24 
25 　　return type;
26 
27 }

三元表達式：

1 // 處理通信狀態
2 
3 formatCommunicationStatus(row) {
4 
5 　　 let type = row.communicationStatus; return type == 1 ? "正常" : "離線";
6 
7 },

if判斷：

 1 // 集中器類型
 2 formatType(row) {
 3 　　let type = row.type;
 4 　　if (type == "") {
 5 　　　　type = "";
 6 　　} else if (type == "1") {
 7 　　　　type = "虛擬";
 8 　　} else if (type == "2") {
 9 　　　　type = "真實";
10 　　}
11 　　return type;
12 },

訪問數組索引：

data中創建數組

1 states:{
2 　　1:"待結算",
3 　　2:"已結算",
4 　　3:"待審核"
5 },

js部分：

1 formatState({state}) {
2 　　return this.states[state];
3 },

部分參考：https://blog.csdn.net/qq_43378800/article/details/111500680

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 0061 Spring MVC的數據格式化--Formatter--FormatterRegistrar--@DateTimeFormat--@NumberFormat python基礎之數據格式化 echartsY軸數據格式化將json數據格式化顯示 java 實現JSON數據格式化將json數據格式化展示在頁面上前端json數據格式化顯示 C# Json數據格式化 json數據格式化顯示在html中 ASP.NET之GridView Eval() 中數據格式化或格式化數據