过滤器filter的使用

分全局过滤器和局部过滤器两种

先介绍第一种全局过滤器的使用：

① 新建filter.js文件，可以和main.js同级，或者放在util文件夹下。

import Vue from 'vue'
import moment form 'moment' // 时间日期的格式转变插件

// 三元运算符过滤
Vue.filter('stautsF',function(value){
  return value == 1 ? '正常': value == 0 ? '异常' : value
})

// 时间格式化
Vue.filter('dictF', (value,format = 'YYYY-MM-DD HH:mm:ss')=>{
    return value ? moment(value).format(format) : ''
})

// switch case过滤
Vue.filter('directionF',(value)=>{
    switch (value) {
        case 'east':
            return '东向';
        case 'south':
            return '南向';
        case 'west':
            return '西向';
        case 'north':
            return '北向';
        default:
            return value;
    }
})

//字典过滤器
Vue.filter('transportF',function(value,dic){
    return (dic.find(item => item.value == value) || {}).label || value;
})

② 引入：在main.js文件里引入，import './filter'   或者   import './util/filter',此处根据filter.js文件所处位置进行相对路径的引入。

③ 使用：在vue文件的html部分，可直接使用

<!--此处只以部分html展示使用方法-->

<!--前面定义的状态过滤器statusF无需传参-->
<el-input :value="flagStatus | statusF"></el-input>
<el-table-column align="center" label="状态">
    <template slot-scope="scope">
        {{scope.row.flagStatus | statusF}}
    </template>
</el-table-column>


<!--前面定义的时间格式化dictF可传参，需要转换的日期格式，不传时默认YYYY-MM-DD HH:mm:ss-->
<el-table-column align="center" label="日期">
    <template slot-scope="scope">
        {{scope.row.createTime | dictF('YYYY-MM-DD')}}
    </template>
</el-table-column>


<!--前面定义的字典过滤器需要传参-->
<template>
    <div>
        <el-input :value="transportWay| transportF(transList)"></el-input>
        <el-table-column align="center" label="运输方式">
            <template slot-scope="scope">
                {{scope.row.transportWay| transportF(transList)}}
            </template>
        </el-table-column>
    </div>
</template>
<script>
export default{
    data(){
        return {
            transportWay:'railway',
            transList:[
                {value:'water',label:'水路运输'},
                {value:'railway',label:'铁路运输'},
                {value:'road',label:'公路运输'},
                {value:'airport',label:'航空运输'},
            ]
        }
    }    
}
</script>

接下来局部过滤filter的使用：

局部过滤就是在某个文件里进行定义后无需引入便可直接使用。定义的方法跟上面全局过滤时的filter.js里定义方法一样，使用也是一样的方法，只不过是把这些都放在了同一个vue文件里。

<template>
    <div>
        <el-input :value="direction| directionF"></el-input>
        <el-input :value="transportWay| transportF(transList)"></el-input>
   
        <el-table-column align="center" label="运输方式">
            <template slot-scope="scope">
                {{scope.row.transportWay| transportF(transList)}}
            </template>
        </el-table-column>
    </div>
</template>
<script>
export default{
    data(){
        return {
            transportWay:'railway',
            transList:[
                {value:'water',label:'水路运输'},
                {value:'railway',label:'铁路运输'},
                {value:'road',label:'公路运输'},
                {value:'airport',label:'航空运输'},
            ],
            direction:'west'
        }
    },

    filters:{
        stautsF(value) {
           return value == 1 ? '正常': value == 0 ? '异常' : value 
        },

        directionF(value){
         switch (value) {
            case 'east':
                return '东向';
            case 'south':
                return '南向';
            case 'west':
                return '西向';
            case 'north':
                return '北向';
            default:
                return value;
            }
        },

        transportF(value,dic){
            return (dic.find(item => item.value == value) || {}).label || value;
        }
    }
}
</script>