在vue中自定义过滤器处理时间戳

写在之前

我们先来看一条数据

{
    "data": {
        "total": 50,
        "pagenum": "1",
        "goods": [
            {
                "goods_id": 144,
                "goods_name": "asfdsd",
                "goods_price": 1,
                "goods_number": 1,
                "goods_weight": 1,
                "goods_state": null,
                "add_time": 1512954923,
                "upd_time": 1512954923,
                "hot_mumber": 0,
                "is_promote": false
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

这是一条json数据，add_time，upd_time字段，返回的时间戳的格式，
显然这不是我们想要的，
当然也可以去麻烦帅气的后端小哥哥，把时间戳转换成时间，在传回来。你可以这样做，但是显然这是不推荐的，这样会增加服务器的压力，应当把更多客户机能做的交给客户机

自定义时间戳过滤器

在main.js中自定义时间戳过滤器

//自定义时间过滤器
Vue.filter('dateFormat',function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  //月份不足两位用0补齐
  const m = (dt.getMonth() + 1 +'').padStart(2,'0')
  const d = (dt.getDay() + '').padStart(2,'0')
  const hh = (dt.getHours() + '').padStart(2,'0')
  const mm = (dt.getMinutes() + '').padStart(2,'0')
  const ss = (dt.getSeconds()+ '').padStart(2,'0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

调用时间过滤器对时间进行格式化

<el-table-column label="创建时间" prop="addTime" width="150px"><template slot-scope="scope">{{scope.row.addTime | dateFormat}}</template></el-table-column>

如果需要在后端对时间戳进行处理，那么可以移步这里java处理时间戳