0
点赞
收藏
分享

微信扫一扫

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


场景

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

 

Vue中使用moment将时间戳数据格式化显示(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>

直接进行显示的效果是

 

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

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

注:

实现

安装moment

npm install moment --save

 

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

安装完成后,在需要进行格式化的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");
},

格式化之后的效果

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

 

 

举报

相关推荐

0 条评论