Vue中使用全局过滤器

1.自定义全局时间过滤器

1.1 首先在mian.js入口文件中定义全局过滤器如下（全局定义，则任何一个组件可以使用）

//定义时间格式化的过滤器，用于将毫秒转换为标准格式的时间
Vue.filter('dateFormat', function (originValue) {
  //将需要过滤的日期转成日期格式
  const dt = new Date(originValue)
  //获取年份
  const y = dt.getFullYear()
  //获取月份，不足两位的前面将以0补齐
  const m = (dt.getMonth() + 1 + '').padStart(2, '0') //+1是因为起始月从0开始
  //获取日，不足两位的前面将以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}`
})

1.2 在组件中使用

• 这里是结合table一起使用（使用的是element-ui）

    <el-table-column label="创建时间" width="200px">
        <template slot-scope="scope">
           {
   
   { scope.row.add_time | dateFormat }}
        </template>
    </el-table-column>

1.3 说明

1.4 效果

• 使用前

•  使用后