vue过滤器的使用(学习篇)

这是表格使用过滤器处理时间戳

<el-table-column label="操作时间" align="center" show-overflow-tooltip>
   <template slot-scope="scope">{{scope.row.updateTime | changeTime}}</template>
</el-table-column>

引入js

import { formatDate } from "@/utils";

过滤器与methods,created同级

 filters: {
    changeTime(data) {
      return formatDate(data);
    },
  },

新建js文件，放处理时间戳的js代码

// 时间戳转换
export const formatDate = (updateTime) => {
  let date = new Date(updateTime)
  let fmt  =   "yyyy-MM-dd hh:mm:ss"
  var o = {
    "M+": date.getMonth() + 1, // 月份
    "d+": date.getDate(), // 日
    "h+": date.getHours(), // 小时
    "m+": date.getMinutes(), // 分
    "s+": date.getSeconds(), // 秒
    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
    "S": date.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
  }
  return fmt
}

一般后台返回的时间格式为时间戳，类型什么的为数字。如下图接口数据

数字类型转为汉字，也是如此