vue/vue

vue/vue"/>

vue/vue

1.在elementUI的table中,使用formatter

ele的table的el-table-column的Table-column Attributes有个formatter的API

<el-table-column prop="gmtCreate" :formatter="timestampToTime" label="时间" width="180"></el-table-column>

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

2.非table表格情况下，使用过滤器

table有自带的格式化API，非table表格的情况下，可以使用filters过滤器。关于过滤器的基础知识，可以看下这个官网API，将过滤函数单独放到一个文件，import一下。

formatDate.js

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

html

<div class="grid-content">{{detailData.gmtCreate | timestampToTime}}</div>

js

import { timestampToTime } from "@/utils/formatDate";
filters: {timestampToTime(time) {let date = new Date(time);return timestampToTime(date);}},