vue+element-ui之全局过滤器

在一个项目中，如果想把所有的时间都转换成想要的格式，每个页面都写一次未免过于麻烦。所以可以创建一个全局过滤器，这样需要时就可以直接使用。

1.在vue项目的components文件夹下创建一个fifter文件夹，在文件夹下创建转换时间的js文件（例如transTime.js，起什么名字随意）。

export default time => {
  var times = new Date(time);
  var y = times.getFullYear(); //年
  var m = times.getMonth() + 1; //月
  var d = times.getDate(); //日
  return y + '/' + m + '/' + d;
};

2.在fifter文件夹下新建文件index.js

import transTime from './transTime';

export default {
  transTime,
};

2.在main.js中引入并遍历fifter文件夹下的index.js

import filters from './filter/index';
for (var i in filters) {
  Vue.filter(i, filters[i]);
}

3.使用。在表格中如果添加的一列数据是时间。就可以利用transTime将element-ui自带的时间格式转换成你自己定义的格式。

<vp-table-column prop="serviceTime" label="走访服务时间" align="center" width="120">
     <template slot-scope="scope">{{scope.row.serviceTime | transTime}}</template>
</vp-table-column>

让我们来看一下最终效果

这样做的好处是在main.js中遍历过fifter文件夹后就不需要在页面中引入js文件了。你也可以在fifter文件夹下加入数字转换（例如保留两位小数）的js文件。最后不要忘了在index.js中引入哦。