table切换数据 vue_Vue-element-admin el-table将接口传入的数据转换成想要的文字显示...

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

布尔类型转换

数字类型转换

时间戳转换

1、布尔类型转换

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

而我想要的效果是

其实很简单，在el-table-column中加入一个就可以实现。这应该是文档中关于插槽的内容。

我实现的代码：注意prop值要相对应

{{ !!(scope.row.result)?'成功':'不成功' }}

2、数字类型

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

实际上我想要的是

实现代码有两种：

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

{{ scope.row.type == 1 ? '表单' : scope.row.type == 2 ?'列表': '' }}

第二种方法：

{{ map[scope.row.type] }}

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

data() {

return {

map: {

1: '表单',

2: '列表',

3: '列表和打印'

}

}

},

3、时间戳转换

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

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

在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、参考文档