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

迈不过友情╰ 2022-10-23 08:21 302阅读 0赞

# 场景 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

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

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

直接进行显示的效果是

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

注：

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

# 实现 #

安装moment

npm install moment --save

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

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

格式化之后的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221023/0cae76df6e27467e8f84eff2652931b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221023/29d7893ba92d48df9e0bcd55244b52a1.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221023/fa262238862e4f599bf1e9ee8f6d3f52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221023/865bbbbffb9c44e4bd5c40c2a67e6e56.png