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

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

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

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

templete

高级搜索

&lthttp://;/span>

{{typeselect.text}}

{{typeselect.text}}

{{typeselect.text}}

{{accuracy.text}}

{{containlist.text}}

核工业

航天工业

航空工业

船舶工业

兵器工业

军工电子

国防综合

其他

{{startlist.text}}

——

{{endlist.text}}

检索

script

css

1、为保证点击加号出来的select标签的v-model不一样，讲v-model与v-for的item绑定；

2、当点击减号使搜索条件只剩下一列时，减号消失 =4" >；同理给加号增加条件，通过长度判断，限制增加的检索条件最多为6列，加号消失

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

let body={

formtips:this.formtips,

cataloglist:this.cataloglist,

timestart:this.timestart,

timeend:this.timeend

}

body传递

默认

高级搜索

点击减号

筛选条件三列，点击检索

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。