自定义格式化时间
一、问题
这是一个后台管理系统中的商品列表页,其中的时间这一项在调用接口后会发现是以毫秒来计算的,这样当然是不行的啦,要换算成我们日常使用的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}`
})
改正后效果图: