vue filter函数实现前端多条件查询

是林海呀

已于 2023-08-03 20:57:44 修改

阅读量672

点赞数 1

文章标签：前端 vue.js javascript

于 2023-08-03 20:54:15 首次发布

本文链接：https://blog.csdn.net/qq_45371619/article/details/132084905

版权

某天我的师傅又找到了我，说前段时间我们不是实现了filter函数的查询了嘛，但是呢你那个只能是单条件的，现在我想要做个多条件的，请问你要怎么实现？好比说一个班，我要通过一个条件去找人，学生有名字，性别，外号，我要通过关键字去寻找相对应的人。
比如：我输入一个“男”，你要找出所有的男同学，还有那个叫王亚男的女同学，还有外号叫男人婆的李四同学。意思是只要满足条件你就输出。我拿到需求后人麻了，首先我想吐槽一下这个需求分析，要是数据一多查出来的结果谁知道是什么，比如我就只想要男同学，一查王亚男在里面……谁叫他是甲方，唉算了，我这里有两方法：
还是老样子先上数据集

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>vue.filter事件</title>
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="selectVal" placeholder="关键词" @blur='queryData'>
			<button @click="queryData()">搜索</button>
			<div class="org">

				<div v-for="(item,index) in orgList" :key="index">
					<!-- 循环输出orgList -->
					{{ item.name }}
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					//这里是表示第一次查出来的数据，也是要展示的数据
					orgList: [{
							name: '王亚男',
							gender: '女',
							nickname: '小王'
						},
						{
							name: '张三',
							gender: '男',
							nickname: '张飞'
						},
						{
							name: '李四',
							gender: '女',
							nickname: '男人婆'
						},
						{
							name: '王五',
							gender: '男',
							nickname: '马超'
						},
						{
							name: '赵六',
							gender: '女',
							nickname: '小六'
						}，
						{
							name: '孙男',
							gender: '男',
							nickname: '小男'
						}
					],
					selectVal: '' //搜索关键字
				},
				methods: {
						//代码写这里
						}
			})
		</script>
	</body>
</html>
<!--方法远不止一种，不要因为问题的解决，而停止探索的的脚步-->

首先也是我们第一时间能够想到的，就是用filter分别去查，之后呢再将结果组合在一起，最后做一边数据去重……

          queryData() {//查询事件
						let Data=this.orgList
						let list=Data.filter(item => item.name.indexOf(this.selectVal) >= 0)//按名字查
						list=list.concat(Data.filter(item => item.gender.indexOf(this.selectVal) >= 0 ))//按性别查
						list=list.concat(Data.filter(item => item.nickname.indexOf(this.selectVal) >= 0))//按外号查
						this.orgList = this.array_remove_repeat(list)//防止数据重复，比如孙男，查名字时有他，查性别时也有他
					},
					array_remove_repeat(a) { // 去重
					    var r = [];
					    for(var i = 0; i < a.length; i ++) {
					        var flag = true;
					        var temp = a[i];
					        for(var j = 0; j < r.length; j ++) {
					            if(temp === r[j]) {
					                flag = false;
					                break;
					            }
					        }
					        if(flag) {
					            r.push(temp);
					        }
					    }
					    return r;
					}

写完之后我很开心，但是后来不久，又有了新的需求说是，加字段了，又加了判断条件，多了学号还有成绩，我原本想着那不就是多CV两次吗，list后面再加条件不就好了，但是哈，要是多了一百个字段怎么办？（一百个……那还查什么呀，CV都CV不过来，怎么办？）
其实filter是有或判断的，这样写：

queryData() {
             let Data=this.orgList
			 let list = Data.filter(item => item.name.indexOf(this.selectVal) >= 0 || 
			     item.gender.indexOf(this.selectVal) >= 0 ||
			     item.nickname.indexOf(this.selectVal) >= 0);//如果要精准查就不要用“indexOf”直接“==”
			     this.orgList = list;
			 },