Use moment in Vue to format and display timestamp data (in el-table)

Scenes

When using el-table to display data, the time format for requesting background data acquisition is a timestamp format

 

Then the front end uses el-table to display the data

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

    </el-table>

The effect of direct display is

 

Now it needs to be formatted in time format and displayed

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi
Follow the public
account Domineering
programmers Get programming-related e-books, tutorial pushes and free downloads.

achieve

Install moment

npm install moment --save

 

After the installation is complete, in the vue page that needs to be formatted

import moment from 'moment'

Then the column that needs to be formatted in the el-table

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

Add: formate

Then implement the method dateFormat in method

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

Effect after formatting