vue前端界面 el-table将接口传入的数据转换成想要的文字显示

前言

总结记录一下vue中的前端界面显示的技巧

一、数字类型转换

1. 在三元运算符中加入判断，以及嵌套实现

<el-table-column label="状态" prop="status" align="center" width="80px">
        <template slot-scope="scope">
          {{ scope.row.status== 1 ? '待确认' : scope.row.type == 2 ?'已确认': '' }} 
        </template>
</el-table-column>

2. 在data中定义一个map存储根据map的值来对应转换的数据

<el-table-column label="状态" prop="status" align="center" width="80px">
        <template slot-scope="scope">
          {{ testEnum[scope.row.status] }}
        </template>
</el-table-column>

data() {
    return {
        testEnum: {
          1: '待确认',
          2: '已确认'
      }
    }
  },

3. 使用 :formatter 来进行数据转换。

<el-table-column label="状态" prop="status" align="center" width="80px" :formatter="formatStatus">
</el-table-column>

formatStatus(row) {
                return row.status=== "1" ? "待确认" :
                       row.status=== "2" ? "已确认" : "";
            },

二、时间戳转换

<el-table-column label="创建时间" prop="createTime" :formatter="timestampToTime" align="center" width="140" />

// 时间戳转化为时间
timestampToTime(row, column) {
        var date = new Date(row.createTime) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y + M + D + h + m + s
    },

参考网址：
https://www.jianshu.com/p/62a90e3fec64

总结

目前vue前端界面转换就是这些了，以后会慢慢补充的