vue那些事儿之使用fifter格式化时间文本

前端显示时间文本格式的时候遇到像如下birthday ，这种每次都要转义一次很烦，查了下Vue文档发现有个叫fifter的东西可以用

 

不多说上栗子

时间格式化JS：

const fullTime = (times) => {
  const time = times || ''
  const date = new Date(time)
  const dateObj = {}

  dateObj.getFullYear = date.getFullYear()
  dateObj.getMonth = date.getMonth() + 1
  dateObj.getDate = date.getDate()
  dateObj.getHours = date.getHours()
  dateObj.getMinutes = date.getMinutes()
  dateObj.getSeconds = date.getSeconds()
  dateObj.getTime = date.getTime()

  return dateObj
}

export const fullDate = fullTime

const format = (time) => {
  let val = time
  if (val < 10) { val = '0' + time }
  return val
}
export const formatDate = (matDate, times) => {
  const _matDate = matDate || '-'
  const _times = times || ''
  return `${format(fullDate(_times).getFullYear)}${_matDate}${format(fullDate(_times).getMonth)}${_matDate}${format(fullDate(_times).getDate)}`
}

Vue 初始化前定义fifter：

// 自定义过滤器,必须放在Vue实例化前面
Vue.filter('formatDate', function (value, matDate) {
  if (!value) return ''
  return formatDate(matDate, value)
})

Html:

  <el-table-column
            prop="birthday" align ="center"
            label="生日"
            width="180">
            <template slot-scope="scope">
              {{ scope.row.birthday | formatDate}}
            </template>
          </el-table-column>

展示：