Vue-element-admin el-table将接口传入

在开发中遇到了这样一个问题，就是接好接口以后数据库中传入的值为'true'和'false'这样的布尔值或者是'0' , '1' , '2'这样数字，还有一种是传入的是时间戳也就是类似'1575949565559'这样子，而实际上他们是有相对应的中文值的，这里提供一种转换的思路。

• 布尔类型转换
• 数字类型转换
• 时间戳转换

1、布尔类型转换

一般来说像这种返回结果，在数据库中存储的值都是布尔类型的。例：

而我想要的效果是

其实很简单，在el-table-column中加入一个<template slot-scope="scope"></template>就可以实现。这应该是文档中关于插槽的内容。
我实现的代码：注意prop值要相对应

<el-table-column label="登录结果" prop="result" align="center" width="130px">
        <template slot-scope="scope">{{ !!(scope.row.result)?'成功':'不成功' }}</template>
</el-table-column>

2、数字类型

同样我又遇到了另外一个问题，就是当传过来的值是数字类型的话怎样用三元运算符来解决呢。可以看到接口中传入的是数字。

实际上我想要的是

实现代码有两种：
一是类似布尔类型，在三元运算符中加入判断，以及嵌套实现。

<el-table-column label="类型" prop="type" align="center" width="80px">
        <template slot-scope="scope">
          {{ scope.row.type == 1 ? '表单' : scope.row.type == 2 ?'列表': '' }} 
        </template>
      </el-table-column>

第二种方法：

<el-table-column label="类型" prop="type" align="center" width="80px">
        <template slot-scope="scope">
          {{ map[scope.row.type] }}
        </template>
</el-table-column>

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

 data() {
    return {
        map: {
          1: '表单',
          2: '列表',
          3: '列表和打印'
      }
    }
  },

3、时间戳转换

我又遇到了一个从数据库中导入时间后，显示的是这样的= =什么鬼，查了一下原来是时间戳。这里一起写了解决方法。

HTML中的代码：利用element-UI 的 formatter 进行转换

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

在methods中写一个 timestampToTime 这样的方法

// 时间戳转化为时间
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
    },

就可以看到是这样的效果啦~

4、参考文档

这部分内容参考官网文档：https://element.eleme.cn/#/zh-CN/component/table
关于插槽的文档：https://cn.vuejs.org/v2/guide/components-slots.html
关于日期格式的文档：https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi