vue/vue-elementUI双花括号插值将时间戳格式化转换成日期的两种方法

最新推荐文章于 2023-04-08 12:52:00 发布

奔跑的蜗牛.

最新推荐文章于 2023-04-08 12:52:00 发布

阅读量1k

点赞数 1

分类专栏：前端学习汇总文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/MrWangisgoodboy/article/details/127384101

版权

前端学习汇总专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.在elementUI的table中,使用formatter

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

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

methods: {
	timestampToTime(row, column) {
      var date = new Date(row.pay_time*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let 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位的话不需乘1000
    let 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>

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