Vue + JS 模糊搜索

思路:

        存入总搜索条件列表,同时存入使用的搜索条件列表.

        通过input里的内容对总搜索条件列表进行模糊搜索,赋值给使用的搜索条件列表.

        当input中的值为空时,直接把总搜索条件列表赋值给使用的搜索条件列表(点击查看全部同理).

代码:

  HTML:

<div class="screen">
			<div class="screen_head" @click="screenBtn(999)">
				<el-image style="width: 17px; height: 17px" :src="require('../../assets/images/框架/查看全部.png')" fit="contain"></el-image>
				<div class="title">查看全部</div>
			</div>
			<div class="screen_con">
				<div class="screenInp" v-if="screenStyle">
					<el-input v-model="value" placeholder="请输入内容"></el-input>
					<div class="shu"></div>
					<div class="screenBtn" @click="screenListBtn()">
						<el-image style="width: 14px; height: 14px" :src="require('../../assets/images/框架/搜索.png')" fit="contain"></el-image>
					</div>
				</div>
				<div class="screen_list">
					<div @click="screenBtn(index)" :class="active == index ? 'active screen_list_con' : 'screen_list_con'" v-for="(item, index) in screenList" :key="index">
						<div class="screen_list_con_left">
							<div class="order">{{ index < 9 ? '0' : '' }}{{ index + 1 }}</div>
							<div class="name" :title="item.name">{{ item.name }}</div>
						</div>
						<div class="screen_list_con_right" :title="item.count">{{ item.count }}</div>
					</div>
				</div>
			</div>
		</div>

JavaScript:

data() {
		return {
            //选中状态,999为啥都没选中
			active: '999',
            //搜索内容
			value: '',
            //总搜索列表
			screenListAll: [],
            //使用的搜索列表
			screenList: [],
            //列表
			list: [],
            //总数据条数,做分页用
			total: 0,
            //一页显示多少条数据,也是一次请求多少条数据
			limit: 20,
            //当前页码
			currentPage: 1,
		};
	},

methods:{
    screenListBtn() {
            //进行了模糊搜索把选中样式清除
			this.active = 999;
            //搜索内容为空,则查询全部
			if (this.value == '') {
				this.screenList = this.screenListAll;
			} else {
            //进行模糊搜索,若name中有符合搜索内容的,则赋值给使用的搜索列表
				this.screenList = this.screenListAll.filter((item) => item.name.includes(this.value));
			}
		},
    screenBtn(e) {
            //查询,重置列表页数
			this.currentPage = 1;
            //若点击的是查询全部,传的值是999,那就清空搜索内容,并把全部搜索内容赋值给使用的搜索列表
			if (e == 999) {
				this.value = '';
				this.screenList = this.screenListAll;
			}
			this.active = e;
            //通过使用搜索列表的内容,去查询列表内容
			this.getList();
            //列表超出滚动,每次切换页码或者刷新得回顶部
			this.$refs.scroll.scrollTop = 0;
		},
}