本文为大家分享了vue2.0多条件搜索组件的实现方法，供大家参考，具体内容如下

搜索条件为死数据，通过select下拉，选取多个条件；同时可点击加号增加搜索条件，点击减号减少搜索条件；

templete

<template> 
 <div class="retrievalmian"> 
 <div class="retrievaltitle"> 
 <a class="btn-default tabbtn" @click="seniorsearch('')" :class="[tabbtn==''?'checked':'']" >高级搜索</a> 
 <a class="btn-default tabbtn" @click="seniorsearch('author')" :class="[tabbtn=='author'?'checked':'']" >作者搜索</a> 
 </div> 
 <div class="retrievalbar"> 
 <div class="formbody"> 
 <div class="formoperate"> 
 <span class="tipsicon addplus" @click="addplus" v-show="formtips.length<12"></span> 
 <span class="tipsicon removeminus" @click="removeminus" v-show="formtips.length>=4"></span> 
 </div> 
 <div class="formline"> 
 <div class="formtips" v-for="(item,index) in formtips"> 
 <div class="formgroup"> 
 <select class="formcontrol" v-model="item.titletype"> 
 <option v-for="typeselect in titletype" v-if="tabbtn==''" :value="typeselect.value">{{typeselect.text}}</option> 
 <option v-for="typeselect in titletypeAuthor" v-if="tabbtn=='author'&&!(index%2)" :value="typeselect.value">{{typeselect.text}}</option> 
 <option v-for="typeselect in titletypeAuthor2" v-if="tabbtn=='author'&&(index%2)" :value="typeselect.value">{{typeselect.text}}</option> 
 </select> 
 </div> 
 <div class="formgroup"> 
 <input type="text" class="forminp" v-model="item.typeinp"> 
 </div> 
 <div class="formgroup"> 
 <select class="formcontrol" > 
 <option v-for="accuracy in accuracys" :value="accuracy.value">{{accuracy.text}}</option> 
 </select> 
 </div> 
 <div class="formgroup"> 
 <select class="formcontrol" v-model="item.containlist"> 
 <option v-for="containlist in containlists" :value="containlist.value">{{containlist.text}}</option> 
 
 </select> 
 </div> 
 </div> 
 </div> 
 <div class="formline"> 
 <div class="formgroup"> 
 <div class="catalog" @click="catalogshow" >文献分类目录</div> 
 <div class="cataloghint"> 
 <ul class="cataloglist" v-show="iscataloglist"> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="核工业">核工业 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="航天工业">航天工业 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="航空工业">航空工业 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="船舶工业">船舶工业 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="兵器工业">兵器工业 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="军工电子">军工电子 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="国防综合">国防综合 
  </label> 
  </div> 
 </li> 
 <li> 
  <div class="checkbox"> 
  <label> 
  <input type="checkbox" v-model="cataloglist" value="其他">其他 
  </label> 
  </div> 
 </li> 
 
 </ul> 
 </div> 
 </div> 
 </div> 
 <div class="formline"> 
 <div class="formgroup"> 
 <select class="formcontrollarg" v-model="timestart"> 
 <option v-for="startlist in timestarts" :value="startlist.value">{{startlist.text}}</option> 
 </select> 
 <span>——</span> 
 <select class="formcontrollarg" v-model="timeend"> 
 <option v-for="endlist in timeends" :value="endlist.value">{{endlist.text}}</option> 
 </select> 
 </div> 
 </div> 
 <div class="formsearch"> 
 <button type="button" class="retrievalsearch btn btn-primary" @click="retrievalsearch">检索</button> 
 </div> 
 </div> 
 </div> 
 </div> 
</template> 

script

<script> 
 import $ from 'jquery' 
 import conf from './../Conf'; 
 
 export default{ 
 data(){ 
 return { 
 formtips:[ 
 
 ], 
 tabbtn: '',//搜索切换 
 cataloglist:[],//文献分类选中目录 
 iscataloglist:false, 
 
 
 titletype:[ 
 { text: '标题', value: 'title' }, 
 { text: '正文', value: 'text' }, 
 { text: '项目', value: 'project' }, 
 { text: '人员', value: 'person' }, 
 { text: '机构', value: 'organization' }, 
 { text: '技术', value: 'tech' }, 
 { text: '地区', value: 'locaton' }, 
 { text: '国家', value: 'country' } 
 ], 
 titletypeAuthor:[{ text: '作者', value: 'author' }], 
 titletypeAuthor2:[{ text: '作者机构', value: 'authoruint' }], 
 accuracys: [ 
 {text:'精确',value:'accurate'}, 
 {text:'模糊',value:'blur'} 
 ], 
 containlists:[ 
 {text:'并含',value:'andwidth'}, 
 {text:'或含',value:'orwidth'}, 
 {text:'不含',value:'nowidth'}, 
 ], 
 
 timestart:'nolimit',//检索起始时间 
 timeend:'2017',//检索结束时间 
 timestarts:[],//开始时间选择数组 
 timeends:[],//结束时间选择数组 
 } 
 }, 
 watch:{ 
 
 }, 
 created: function () { 
 this.init(); 
 }, 
 methods: { 
 init: function(){ 
 this.formtips=[ 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 } 
 ]; 
 this.timestarts = [ 
 {text:'不限',value:'nolimit'}, 
 {text:'2016',value:'2016'}, 
 {text:'2015',value:'2015'}, 
 {text:'2014',value:'2014'}, 
 {text:'2013',value:'2013'}, 
 {text:'2012',value:'2012'}, 
 {text:'2011',value:'2011'}, 
 ]; 
 this.timeends = [ 
 {text:'2017',value:'2017'}, 
 {text:'2016',value:'2016'}, 
 {text:'2015',value:'2015'}, 
 {text:'2014',value:'2014'}, 
 {text:'2013',value:'2013'}, 
 {text:'2012',value:'2012'}, 
 {text:'2011',value:'2011'}, 
 ] 
 }, 
 addplus:function () { 
 if(this.tabbtn==''){ 
 this.formtips.push({ 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }); 
 this.formtips.push({ 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }); 
 }else{ 
 this.formtips.push({ 
 titletype:'author', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }); 
 this.formtips.push({ 
 titletype:'authoruint', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }); 
 } 
 
 }, 
 removeminus:function () { 
 this.formtips.splice(-2); 
 }, 
 seniorsearch:function (str) { 
 if(this.tabbtn!=str){ 
 this.tabbtn = str; 
 if(this.tabbtn==''){ 
 this.formtips=[ 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'title', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 } 
 ]; 
 }else{ 
 this.formtips=[ 
 { 
 titletype:'author', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'authoruint', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'author', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 }, 
 { 
 titletype:'authoruint', 
 typeinp:'', 
 accuracy:'accurate', 
 containlist:'andwidth', 
 } 
 ] 
 } 
 } 
 }, 
 
 catalogshow:function () { 
 this.iscataloglist = !this.iscataloglist; 
 console.log(this.cataloglist); 
 }, 
 
 retrievalsearch:function(){ 
 let body={ 
 formtips:this.formtips, 
 cataloglist:this.cataloglist, 
 timestart:this.timestart, 
 timeend:this.timeend 
 }//点击检索传的数据 
 console.log(body); 
 } 
 
 }, 
 
 } 
 
</script> 

css

<style scoped> 
 /*临时样式*/ 
 .retrievalmian{ 
 margin: 20px; 
 width:75%; 
 } 
 /**/ 
 /*.retrievaltitle{*/ 
 /*background: #FCFCFC;*/ 
 /*}*/ 
 .retrievaltitle .tabbtn:first-child{ 
 margin-right: -5px; 
 } 
 .retrievaltitle .tabbtn:hover{ 
 text-decoration: none; 
 } 
 .retrievaltitle .tabbtn{ 
 padding: 2px 8px; 
 background: #FBFBFB; 
 border: 1px solid #DFDFDF; 
 margin-bottom: -1px; 
 } 
 .retrievaltitle .tabbtn.checked{ 
 color: #E50F10; 
 padding-top: 8px; 
 border-bottom: 1px solid #FBFBFB; 
 } 
 .retrievalbar{ 
 border: 1px solid #E5E5E5; 
 background: #FCFCFC; 
 } 
 .formbody{ 
 position: relative; 
 margin: 10px 0px; 
 } 
 .formoperate{ 
 position: absolute; 
 top:10px; 
 right: 20px; 
 } 
 
 .formoperate .tipsicon{ 
 color: #59A4D2; 
 display: inline-block; 
 line-height: 15px; 
 cursor: pointer; 
 margin-left: 15px; 
 width: 20px; 
 height: 20px; 
 } 
 .formoperate .addplus{ 
 background: url(../static/img/addplusicon.png) no-repeat center; 
 } 
 .formoperate .removeminus{ 
 background: url(../static/img/removeicon.png) no-repeat center; 
 } 
 .formline{ 
 padding: 5px 30px; 
 } 
 .formtips{ 
 display: inline-block; 
 margin-bottom: 10px; 
 margin-right: 10px; 
 } 
 .formgroup{ 
 display: inline-block; 
 } 
 .formcontrol{ 
 border: 1px solid #999; 
 width: 80px; 
 height: 22px; 
 } 
 .forminp{ 
 border: 1px solid #146AC4; 
 width: 120px; 
 height: 22px; 
 } 
 .formcontrollarg{ 
 width:120px; 
 height: 25px; 
 } 
 .formsearch{ 
 position: absolute; 
 bottom:10px; 
 right: 20px; 
 } 
 .retrievalsearch{ 
 padding: 5px 20px; 
 } 
 .formgroup .catalog{ 
 border: 1px solid #999; 
 width:120px; 
 height: 22px; 
 cursor: pointer; 
 background: url(../static/img/dropdown.png) no-repeat; 
 background-position: 95% 45%; 
 } 
 .cataloghint{ 
 position: relative; 
 } 
 .cataloglist{ 
 position: absolute; 
 top: -1px; 
 left: 0; 
 padding: 0; 
 border: 1px solid #999; 
 background: #fff; 
 z-index: 10; 
 width: 120px; 
 } 
 .cataloglist li{ 
 padding:2px 5px; 
 } 
 .cataloglist li:hover{ 
 background: #1e90ff; 
 } 
 .checkbox { 
 margin:0px; 
 } 
</style> 

1、为保证点击加号出来的select标签的v-model不一样，讲v-model与v-for的item绑定；<divclass="formtips" v-for="(item,index) in formtips">
<selectclass="formcontrol" v-model="item.titletype" >

2、当点击减号使搜索条件只剩下一列时，减号消失 <spanclass="tipsicon removeminus" @click="removeminus"   v-show="formtips.length>=4" ></span>；同理给加号增加条件，通过长度判断，限制增加的检索条件最多为6列，加号消失

3、点击检索后，使选中的检索条件通过

let body={
 formtips:this.formtips,
 cataloglist:this.cataloglist,
 timestart:this.timestart,
 timeend:this.timeend
}

body传递
默认

高级搜索

作者搜索

点击减号

筛选条件三列，点击检索

控制台输出，点击检索要传的值body

更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总 进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue2.0多条件搜索组件  # vue条件搜索组件  # vue多条件搜索  # 基于Vue.js实现简单搜索框  # 利用vue + element实现表格分页和前端搜索的方法  # Vue.js实现多条件筛选、搜索、排序及分页的表格功能  # vue实现搜索功能  # Vue Element 分组+多选+可搜索Select选择器实现示例  # Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)  # vue组件实践之可搜索下拉框功能  # 基于vue实现可搜索下拉框定制组件  # vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据  # vue实现实时搜索显示功能  # 高级搜索  # 搜索功能  # 结束时间  # 多个  # 请点击  # 只剩下  # 不含  # 大家分享  # 多为  # 绑定  # 多条  # 具体内容  # 大家多多  # 分类目录  # 为保证  # cataloghint  # catalogshow  # containlists  # catalog  # ul 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 文字头像制作网站推荐软件,醒图能自动配文字吗？  详解Huffman编码算法之Java实现  BootStrap整体框架之基础布局组件  Angular 表单中正确绑定输入值以确保提交与验证正常工作  如何在腾讯云服务器快速搭建个人网站？  如何续费美橙建站之星域名及服务？  如何有效防御Web建站篡改攻击？  详解Oracle修改字段类型方法总结  图册素材网站设计制作软件,图册的导出方式有几种？  js实现获取鼠标当前的位置  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  微信小程序制作网站有哪些,微信小程序需要做网站吗？  太平洋网站制作公司,网络用语太平洋是什么意思？  Python函数文档自动校验_规范解析【教程】  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何实现API版本控制_Laravel版本化API设计方案  如何在建站主机中优化服务器配置？  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  网站优化排名时，需要考虑哪些问题呢？  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  如何快速搭建高效WAP手机网站吸引移动用户？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Android实现代码画虚线边框背景效果  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  Linux后台任务运行方法_nohup与&使用技巧【技巧】  JavaScript如何实现错误处理_try...catch如何捕获异常？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  详解CentOS6.5 安装 MySQL5.1.71的方法  如何在万网自助建站中设置域名及备案？  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  如何选择PHP开源工具快速搭建网站？  如何快速搭建虚拟主机网站？新手必看指南  android nfc常用标签读取总结  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  C#如何调用原生C++ COM对象详解  如何用已有域名快速搭建网站？  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】