vue2.0多条件搜索组件使用详解

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

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

templete

script

css

1、为保证点击加号出来的select标签的v-model不一样，讲v-model与v-for的item绑定；v-for="(item,index) in formtips">
 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搜索功能汇总 进行学习

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