Vue + Element 将前端时间戳转换成日期格式

连胜是我偶像

于 2023-03-28 16:55:10 发布

阅读量1.2k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_54348877/article/details/129819488

版权

文章介绍了两种在Vue项目的el-table-column中对时间数据进行格式化的方法。方法1涉及安装moment.js库，然后导入并在column中使用formatter方法。方法2则直接使用内置的Date对象进行格式化。这两种方法都可以有效地将时间数据显示为友好的格式。

摘要由CSDN通过智能技术生成

方法1：

方法2：

方法1：

只需执行这些代码

npm install moment

import moment from 'moment'

:formatter="dateFormat"

 //时间格式化-S
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

1、下载第三方插件

npm install moment

2、在需要转换时间的vue页面引入插件

import moment from 'moment'

3、给需要转换的el-table-column添加 :formatter

:formatter="dateFormat"

4、编写dateFormat方法

    //时间格式化-S
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

方法2：

只需执行这些代码

 :formatter="dateFormat"

    dateFormat(row, column, cellValue, index) {
      return new Date(cellValue).toLocaleString();
    },

1、给需要转换的el-table-column添加 :formatter

2、编写dateFormat方法

    dateFormat(row, column, cellValue, index) {
      return new Date(cellValue).toLocaleString();
    },