在开发中遇到了这样一个问题，就是接好接口以后数据库中传入的值为'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
