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

768 阅读1分钟

场景

在使用el-table显示数据时,请求后台数据获取的时间格式是 时间戳 格式,那我们怎么办,现在需要将其格式化时间格式并显示

实现

1.安装moment

npm install moment --save

2.main.js全局引入moment

import moment from 'moment'//导入文件
Vue.prototype.$moment = moment;//赋值使用

3.然后在el-table中需要格式化的那一列添加:formate

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

4.然后在method中将方法dateFormat实现

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

5.格式化之后的效果

捕获e.PNG 6.注: 如果使用的是element ui 表格,可以在表格中直接将时间戳转为时间格式,这一点非常好用! (此步直接替换3和4)

<el-table-column
    prop="visitDate"
    label="开始时间">
    <template slot-scope="scope">
        {{$moment(scope.row.visitDate).format("YYYY-MM-DD HH:mm:ss")}}
    </template>
</el-table-column>