分全局过滤器和局部过滤器两种
先介绍第一种全局过滤器的使用:
① 新建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>