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删除。

猜您在找 vue+element 表格formatter数据格式化并且插入html标签 ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法 0061 Spring MVC的数据格式化--Formatter--FormatterRegistrar--@DateTimeFormat--@NumberFormat 【Java数据格式化】使用DecimalFormat 对Float和double进行格式化 Python数据格式化 SpringMVC数据格式化 json数据格式化功能 python基础之数据格式化 echartsY轴数据格式化将json数据格式化显示