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

深藏阁楼爱情的钟 2024-03-24 10:11 74阅读 0赞

**目录**

方法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'

![feec3c95c1064dcfb8f95b195f49f69c.png][]

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

:formatter="dateFormat"

![8fe618712c034c139a23f67ed913923b.png][]

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");
        },

![0e422b2ae71c4a938e31553f6b56943d.png][]

### 方法2： ###

只需执行这些代码

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

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

![15b0801500a94861a19c79554b2ed955.png][]

2、编写dateFormat方法

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

![88e7c52577ae490493b1e21943ad1b81.png][]

[feec3c95c1064dcfb8f95b195f49f69c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/939ec93a3ad64c70b569a9865927bda3.png
[8fe618712c034c139a23f67ed913923b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2cd8e77cd066491ba34e2171a417e162.png
[0e422b2ae71c4a938e31553f6b56943d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e567d635abd7428d847928a68de2e9c7.png
[15b0801500a94861a19c79554b2ed955.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1c51448c181a4424bd0bef0aac69d0f8.png
[88e7c52577ae490493b1e21943ad1b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/46641f94072c47c885cc5565f28f99de.png