Vue中使用moment将时间戳数据格式化显示(el-table中)

场景

在使用el-table显示数据时，请求后台数据获取的时间格式是时间戳格式

 

然后前端使用el-table进行显示数据

    <el-table v-loading="loading" :data="onlineUserList" @selection-change="handleSelectionChange">
 
      <el-table-column label="登录时间" align="center" prop="bindTime" width="180" />

    </el-table>

直接进行显示的效果是

 

现在需要将其格式化时间格式并显示

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

安装moment

npm install moment --save

 

安装完成后，在需要进行格式化的vue页面中

import moment from 'moment'

然后在el-table中需要格式化的那一列

<el-table-column label="登录时间" align="center" prop="bindTime" width="180" :formatter="dateFormat"/>

添加:formate

然后在method中将方法dateFormat实现

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

格式化之后的效果