VUE项目中的全局格式化时间过滤器

自定义格式化时间

一、问题

这是一个后台管理系统中的商品列表页，其中的时间这一项在调用接口后会发现是以毫秒来计算的，这样当然是不行的啦，要换算成我们日常使用的2020-04-07 17:13 这样的时间格式

二、解决办法

1、打开项目中的main.js文件
注册一个全局的过滤器，名称可以自定义，我这里用的是‘dateFormat’

	//对名称进行定义,提供一个function函数   originVal  为形参
Vue.filter('dateFormat',function(originVal){
    
    

  const dt = new Date(originVal)
	//年的时间	
  const y = dt.getFullYear()
  	//月的时间  .padStart 不足两位自动补0  2位长度
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
   //日的时间
  const d = (dt.getDate() + '').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 'yyyy-mm-dd hh:mm:ss'  可以改成下面的方法
  return `${
      
      y}-${
      
      m}-${
      
      d} ${
      
      hh}:${
      
      mm}:${
      
      ss}`
})

2.对时间进行渲染处理
找到定义时间的地方，通过作用域插槽的方式引入

label“名称”
prop 是绑定接口里面的数据对象
slot-scop 接收一下插槽里面的数据
dateFormat 格式化时间过滤器的名称

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

下面是代码截图：

效果图如下：

—————————————————— 补充说明 ——————————————————
由于之前没有注意，检查项目时发现由时间戳转换为年月日进制时导致时间为1970年，
改正后的代码如下：在originVal 后面*1000即可

原因：这是因为在转换时原来的时间戳是为毫秒，转换为年月日后就会为1970的年，可以在毫秒后面*1000 这样即可完成转换了

Vue.filter('dateFormat',function(originVal){
    
    

  const dt = new Date(originVal*1000)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  const d = (dt.getDate() + '').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}`
})

改正后效果图：