问题描述:
前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ?
方法一:
elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化
<el-table-column show-overflow-tooltip prop="crteTime" :formatter="formatDate" label="创建时间" min-width="150" align="center" />
formatDate(row, column) {
function addDateZero(num) {
return (num < 10 ? "0" + num : num);
}
let d = new Date(row.crteTime);
let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());
return formatdatetime; //返回给前台页面的值
}
方法二:
在此列上添加template,显示的内容调用函数parseDateFull,参数为后台返回的时间。
<el-table-column
label="处理时间"
align="center"
prop="clsj"
width="180"
>
<template slot-scope="scope">
<span>{{ parseDateFull(scope.row.clsj) }}</span>
</template>
</el-table-column>
//然后定义函数parseDateFull的实现
parseDateFull(time) {
var x = new Date(time);
var z = {
y: x.getFullYear(),
M: x.getMonth() + 1,
d: x.getDate(),
h: x.getHours(),
m: x.getMinutes(),
s: x.getSeconds(),
};
if (z.M < 10) {
z.M = "0" + z.M;
}
if (z.d < 10) {
z.d = "0" + z.d;
}
if (z.h < 10) {
z.h = "0" + z.h;
}
if (z.m < 10) {
z.m = "0" + z.m;
}
return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m ;
}
方法三:
在遍历的时候执行一个函数,将后台返回的毫秒数转换为指定的格式显示:
<el-table-column
label="处理时间"
align="center"
prop="time"
width="180"
>
<template slot-scope="scope">
<span>{{time | formateDate1}}</span>
</template>
</el-table-column>
/*转换时间格式*/
filters:{//如下这样写
//转换时间格式
formateDate1(time){
var datetime = time
function addDateZero(num) {
return (num < 10 ? "0" + num : num);
}
let d = new Date(datetime);
let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());
if(datetime){
return formatdatetime; //返回给前台页面的值
}
}
},
最新评论