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

Posted on In

在实际项目中，需要制作"我的订单"功能。功能逻辑如下：使用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

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