vue设置全局时间格式化_vue 全局这是时间format

vue前台需要用户能看得懂的时间格式如常见的“2021-03-10 12:02:35”，但是后台数据库则需要时间格式如LocalDateTime（“2021-03-10T15:31:01”）或者Date类型的，如果数据不经过处理，直接显示，肯定可读性差。

下边就介绍一下前台vue处理方式，就是在vue项目的main.js中创建一个过滤器，把时间格式化处理。

Vue.filter('dataFormat', function (originVal) {
  const dt = new Date(originVal)
  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')
  // yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

在需要进行格式化处理的地方直接引用即可，此处以element中的表格引用为例

<el-table-column label="使用有效期">
    <template slot-scope="scope">{{scope.row.beginTime | dataFormat}}</template>
</el-table-column>