根据Vuejs制作的可查找多个数值的过滤器

在实际项目中,需要制作”我的订单”功能。功能逻辑如下:使用ajax将所有订单数据下载到json数组中,将json数组与div绑定。

且订单有多个状态,如state=1是待确认订单,state=2是待付款订单,state=3是待配送订单,state=4是待评价订单。

但是在调支付接口时,发现已付款订单有两种状态:同步状态与异步状态(交易平台需要一定时间确认后才能将确认消息异步发送给服务端),为了用户体验,拟使同步与异步状态的订单都归类在“已付款订单”中,因此Vue原生自带的单个数值搜索的过滤器不足以满足需求,需要一个能够同时搜索多个数值的过滤器来进行过滤。

过滤器代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* Filter filter array for arrays
*
* @param {String} arr
* @param {String} searcharr
* @param {String} feature
*/

function filtersBy(arr, searcharr, feature) {
searcharr = convertArray(searcharr);
arr = convertArray(arr);
var res = [];
var item, searchitem;
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < searcharr.length; j++) {
item = arr[i];
searchitem = searcharr[j];
console.log(feature)
if (item[feature] == searchitem) {
res.push(item);
}
}
}
return res;
}

插入源码后注册即可。

1
2
3
4
5
6
var filters = {
orderBy: orderBy,
filterBy: filterBy,
filtersBy: filtersBy,
limitBy: limitBy
}

运行效果:

数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var DATA = {
"datas": [{
"id": 1,
"type": 1,
"data": "这是分类一的第一项"
}, {
"id": 2,
"type": 1,
"data": "这是分类一的第二项"
}, {
"id": 3,
"type": 1,
"data": "这是分类一的第三项"
}, {
"id": 4,
"type": 2,
"data": "这是分类二的第一项"
}, {
"id": 5,
"type": 2,
"data": "这是分类二的第二项"
}, {
"id": 6,
"type": 3,
"data": "这是分类三的第一项"
}, {
"id": 7,
"type": 3,
"data": "这是分类三的第二项"
}, {
"id": 8,
"type": 3,
"data": "这是分类三的第三项"
}, {
"id": 9,
"type": 3,
"data": "这是分类三的第四项"
}]
}

html:
1
2
3
<div id="type-1">
<li v-for="data in datas | filtersBy '[2,3]' 'type'" track-by="item.id">{{data.data}}</li>
</div>

js:
1
2
3
4
var list = new Vue({
el: '#type-1',
data: DATA
})

结果:

upload successful

可以满足需求,在数据中搜索多项并过滤。