傳統註冊過濾器

1、先在 js 檔案中匯出方法

/**
 *
 * @param {*} date
 * @returns
 */
export function dateTimeFormat(date) {
  const json_date = new Date(date).toJSON()
  console.log(json_date)
  return new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
}

2、在 main.js 中匯入方法並註冊

import { dateTimeFormatData } from '@/filters' // 引入工具類
Vue.filter("dateTimeFormatData ", dateTimeFormatData )

3、在元件中使用過濾器

使用全域性方式匯入所有的過濾器

1、在 filters/index.js 中匯出方法

/**
 *
 * @param {*} date
 * @returns
 */
export function dateTimeFormat(date) {
  console.log(date)
  const json_date = new Date(date).toJSON()
  console.log(json_date)
  return new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
}

 
/**
 *
 * @param {*} date
 * @returns
 */
export function dateTimeFormatData(date) {
  const d = new Date(date)
  return d.getFullYear() + '-' + (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + '-' + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
}

2、在 main.js 中統一註冊過濾器

import * as filters from '@/filters' // 引入工具類

Object.keys(filters).forEach(key => {
  // 註冊過濾器
  Vue.filter(key, filters[key])
})

3、在元件中使用過濾器

<el-table-column
  prop="timeOfEntry"
  label="入職時間"
  width="120"
>
  <template slot-scope="row">
    {{ row.row.timeOfEntry | dateTimeFormat }}
  </template>
</el-table-column>

<el-table-column
  prop="timeOfEntry"
  label="入職時間"
  width="120"
>
  <template slot-scope="row">
    {{ row.row.timeOfEntry | dateTimeFormat}}
  </template>
</el-table-column>