Vue自定义时间过滤器处理表格时间显示异常的问题

在使用vue table组件进行数据渲染的时候通常会遇到关于时间的数据显示异常的问题，原因通常在于后端接口给我们返回的时间数据格式不一致所导致，所以需要我们来自定义一个关于时间处理的过滤器来处理这个问题

在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.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}`
})

在表格中关于时间的部分我们需要定义一个作用域插槽将该处的时间数据传至处理函数中处理

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

这样在返回的数据中显示的既是正常的时间数据