情景
将后台存的数字订单状态格式化显示在前端
使用filter
-
新建filters文件
-
order.js 写处理订单的filter方法
export default {
setOrderStatus (status) {
switch (status) {
case 1:
return '待付款'
case 2:
return '待发货'
case 3:
return '待收货'
case 4:
return '待评价'
default:
return '未获取到状态'
}
},
setStatusStyle (status) {
if (status === '未获取到状态') {
return 'red'
}
}
}
- index.js 将filter导出
import orders from './orders'
export default {
...orders
}
- 在main.js中全局注册使用
import filters from '@/plugins/filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
- 页面中使用
<div>
过滤器使用
{{ 1 | setOrderStatus}}
<a-table style="width:100%" :columns="columns" :data-source="tableData" bordered>
<div slot="status" slot-scope="text" :class="text | setOrderStatus | setStatusStyle">
{{text | setOrderStatus}}
</div>
</a-table>
</div>
</template>
<script>
import tableData from './table'
// import filterList from '@/filters';
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'name' }
},
{
title: '订单',
dataIndex: 'order',
key: 'order',
scopedSlots: { customRender: 'order' }
},
{
title: '价格',
dataIndex: 'price',
key: 'price',
scopedSlots: { customRender: 'price' }
},
{
title: '状态',
key: 'status',
dataIndex: 'status',
scopedSlots: { customRender: 'status' }
},
{
title: '占比',
dataIndex: 'rote',
key: 'rote',
scopedSlots: { customRender: 'rote' }
},
];
export default {
name: 'FilterPage',
data() {
return {
columns,
tableData
}
},
// filters: {
// ...filterList
// },
mounted() {
// console.log('filters', filterList)
},
methods: {
},
};
</script>
<style lang="less" scoped>
.red {
color: red
}
</style>
- table.js
export default [
{
name: '商品1',
order: '546645',
price: 1111,
status: 1,
rote: 0.5
},
{
name: '商品1',
order: '546456',
price: 4545,
status: 2,
rote: 0.6
},
{
name: '商品1',
order: '4564645',
price: 1111,
status: 3,
rote: 0.3
},
{
name: '商品1',
order: '6456456',
price: 1222,
status: 4,
rote: 0.2
},
{
name: '商品1',
order: '45646564',
price: 4545,
status: null,
rote: 0.8
},
]
效果
总结
功能
主要用于格式化文本
使用
注册方式
- 在组件的选项中定义
- 在创建Vue.js实例之前全局定义(以上Demo)
使用方式
- 用于
双括号插值
和v-bind表达式
(2.1.0+开始),应该被添加在js表达式的尾部,由管道符号指示 - 可以串联并且接受参数
{{mes | filter(agrs1, agrs2)}}
// mes 会作为第一个参数,agrs1作为第二个,agrs作为第三个
原理《深入浅出Vue.js》
filters是个对象,自定义的过滤器以名称和函数为键值存于filters
- 在编译阶段将过滤器编译成函数调用,串联的过滤器编译后是一个嵌套的函数调用,前一个过滤器的执行结果是最后一个过滤器函数的参数
- 编译后的_f函数是
resolveFilter
函数的别名,resolveFilter
函数的作用是找到对应的过滤器并返回 - 编译过滤器的过程分两歩:解析和
resolveFilter