vue + elementUI 项目中使用 vue 全局filter实现table列数据操作过滤

使用场景：项目中由于接口数据返回的日期格式是yyyymmddhhmmss 或者 yyyymmdd，在table中显示要使用yyyy-mm-dd hh:mm:ss 和 yyyy-mm-dd 就想着在列中使用过滤器来实现这个功能就不用在接口返回的时候操作数据了。

1.在main.js里面加个Vue的全局过滤器。这个过滤器接受参数val 可能是undefined所以刚开始加了个判断 然后因为可能返回数据是yymmdd所以分字符串长度。

Vue.filter('NumberTransformDate', function (val) {
  if(val){
    if (val.length <= 8 ){
      return (val.slice(0,4) +  "-"  + val.slice(4,6)  + "-" + val.slice(6,8) )
    }else if  (val.length === 14){
      return (val.slice(0,4) +  "-"  + val.slice(4,6)  + "-" + val.slice(6,8) + ' ' + val.slice(8,10) + ':' + val.slice(10,12) + ':' + val.slice(12,14));
    }else {
      return val
    }
  }
});

2.然后在vue的页面中调用这个全局的NumberTransformDate过滤函数

   这里的scope.row.startDate 和scope.row.endDate就是接口返回的数据  这两列就是表格有关日期需要过滤的列

                <el-table-column
                        prop="startDate"
                        label="开始日期"
                        align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row.startDate| NumberTransformDate}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="endDate"
                        label="结束日期"
                        align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row.endDate| NumberTransformDate}}
                    </template>
                </el-table-column>