Vue引入全局过滤器

喜欢ヅ旅行 2022-01-31 11:55 360阅读 0赞

## 创建单独的文件 ##

![在这里插入图片描述][20190516162536954.png]

## 加上时间过滤函数 ##

将formatDate 暴露export 出来

// 时间戳转时分秒
    function getformatDate (date, fmt) { 
      if (/(y+)/.test(fmt)) { 
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = { 
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
      };
      for (let k in o) { 
          if (new RegExp(`(${ k})`).test(fmt)) { 
              let str = o[k] + '';
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
          }
      }
      return fmt;
    };
    
    function padLeftZero (str) { 
      return ('00' + str).substr(str.length);
    };
    
     // 时间过滤
     export function formatDate(time) { 
      return getformatDate(new Date(time), "yyyy-MM-dd hh:mm");
    }

## 在main.js中全局引入 ##

import * as filters from './filters' // global filters
    
    // register global utility filters.
    Object.keys(filters).forEach(key => { 
      Vue.filter(key, filters[key])
    })

## 在组件中使用formatDate过滤时间戳 ##

<el-table :data="item.children" style="width: 100%">
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="portName" label="上传单位"></el-table-column>
                <el-table-column prop="createdTime" label="上传时间">
                  <template slot-scope="scope">{
       {scope.row.createdTime | formatDate}}</template>
                </el-table-column>
              </el-table>

## 页面显示 ##

![在这里插入图片描述][20190516163416383.png]

[20190516162536954.png]: /images/20220131/0a94b595c0704c09b913eddeaf8071c0.png
[20190516163416383.png]: /images/20220131/9e82779aaa964b80b6fbdce33e5b30fe.png