![v2-6f9524109f3cbf3dd86123e4bcc646db_1440w.jpg?source=172ae18b](http://img-01.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-6f9524109f3cbf3dd86123e4bcc646db_1440w.jpg?source=172ae18b)
最近在着手写一个vue的项目,这时候我们会在后台拿来数据,然后显示在前台的后台页面里面,这时候就会遇到问题,加入后台请求出来的数据是时间戳怎么办?
什么是所谓的时间戳(1514865808)???如下图所示
![v2-6dc23578584a02993cd14f30a23bd3ef_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-6dc23578584a02993cd14f30a23bd3ef_b.jpg)
后台会传来这样的时间戳(1514865808)那我们应该怎么办呢?
本来我是想用js里面的方法去解决,可是不知如何下手,但是就算出来了,那这样的代码在Vue中看起来也不太优雅。那么具体怎么去解决呢??
我想到了一个格式化的组件就是npm中的moment组件,他是第三方专门用来处理时间的,但是我又该如何去把他写在我们的element-ui表格中,以及去实现我们想要的功能呢?
![v2-d542cd51ff78dbdb2743fe30774097fd_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-d542cd51ff78dbdb2743fe30774097fd_b.jpg)
我在element-ui中查找表格自带的属性的时候看到了formatter这样一个属性,似乎觉得可以借助他来实现功能,然后在各种的查找下,我找出了如何解决这样一个问题的办法。接下来是我们的解决办法:
① 在你的vue项目中安装moment第三方组件
npm
![v2-62d5a7934d74e27db26f5b38bf494d1c_b.png](http://img-01.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-62d5a7934d74e27db26f5b38bf494d1c_b.png)
② 在你需要格式化时间的页面引入moment组件
import moment from 'moment'
![v2-ea7e7b7e142fa946abf967876d678eec_b.png](http://img-02.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-ea7e7b7e142fa946abf967876d678eec_b.png)
③ 然后配合我们element-ui,在元素中加入 :formatter
<
![v2-5d53ce728fece08e05e812ad6a154818_b.png](http://img-02.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-5d53ce728fece08e05e812ad6a154818_b.png)
④ 然后声明一个方法,去调用
//时间格式化
![v2-0aab0ca39a93a366036c35e86e4e213c_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-0aab0ca39a93a366036c35e86e4e213c_b.jpg)
这样问题就解决了。
![v2-bccb1ca1a6273362ae00ab9f563d8622_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=da7a2e0a-532e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-bccb1ca1a6273362ae00ab9f563d8622_b.jpg)