基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

• Z时代
• 2024-01-10
• 分类：综合

基于Vue实现的多条件筛选功能(类似京东和淘宝功能)，可以支持多选、清空、全选功能，数据源是通过JSon格式的数据封装而成。

实现的效果图：

代码实现如下：

html:

<div id='app'>
<template v-if='condition.length'>
	<div>
<span>已选中:<span>
	<span v-for='(item,index) in condition' class='active'>{{item.name}}&nbsp;|&nbsp;</span>
	</div>
</template>
<template v-if='category.length'>
	<div class='nav' v-for='(items,index) in category'>
		<div class='mutil-query-title' v-if='items.name' :key="items.id">{{items.name}}<span style='margin-left: 20px;' @click='allIn(index)'>全选</span>|<span @click='remove(index)'>清空</span></div>
		<ol v-if='items.items.length'>
			<li v-for='(item,key) in items.items'>
				<span :class="{'active':item.active}" @click='handle(index,key)' :key='item.id'>{{item.name}}</span>
			</li>
		</ol>
	</div>
</template>
</div>

js代码如下：

var list={
	category:[
		{
			name:'品牌',
			items:[
			{
				name:'联想',
				active: false
			},
			{
				name:'小米',
				active: false
			},
			{
				name:'苹果',
				active: false
			},
			{
				name:'东芝',
				active: false
			}
			]
		},
		{
			name:'CPU',
			items:[
			{
				name:'intel i7 8700K',
				active: false
			},
			{
				name:'intel i7 7700K',
				active: false
			},
			{
				name:'intel i9 9270K',
				active: false
			},
			{
				name:'intel i7 8700',
				active: false
			},
			{
				name:'AMD 1600X',
				active: false
			}
			]
		},
		{
			name:'内存',
			items:[
			{
				name:'七彩虹8G',
				active: false
			},
			{
				name:'七彩虹16G',
				active: false
			},
			{
				name:'金士顿8G',
				active: false
			},
			{
				name:'金士顿16G',
				active: false
			}
			]
		},
		{
			name:'显卡',
			items:[
			{
				name:'NVIDIA 1060 8G',
				active: false
			},
			{
				name:'NVIDIA 1080Ti 16G',
				active: false
			},
			{
				name:'NVIDIA 1080 8G',
				active: false
			},
			{
				name:'NVIDIA 1060Ti 16G',
				active: false
			}
			]
		}
	],
	condition:[
	]
};

var count=0;
var app =new Vue({
	el:'#app',
	data:list,
	methods:{
		handle:function(index,key){
			var item=this.category[index].items;
			item.filter(function(v,i){
				if(i==key){
					v.active=true;			
					this.list.condition.filter(function(v2,i){
						if(v.name==v2.name){
							this.list.condition.splice(i,1);
							count--;
						}
					});					
					Vue.set(this.list.condition,count++,v);
				}
			});
		},
		remove:function(index){
			var item=this.category[index].items;
			item.filter(function (v1,key) {
				v1.active=false;
				this.list.condition.filter(function(v2,i){
					if(v1.name==v2.name){
						this.list.condition.splice(i,1);
						count--;
					}
				});
			});
		},
		allIn:function(index){
			var item=this.category[index].items;
			item.filter(function (v,key) {
				v.active=true;
				this.list.condition.filter(function(v2,i){
					if(v.name==v2.name){
						this.list.condition.splice(i,1);
						count--;
					}
				});					
				Vue.set(this.list.condition,count++,v);
			});			
		}
	}
});

源码地址：http://xz.jb51.net:81/201905/yuanma/mutilQuery(jb51.net).rar

以上所述是小编给大家介绍的Vue多条件筛选功能详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

以上是 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能) 的全部内容， 来源链接： utcz.com/z/342039.html