vue2.0多条件搜索组件使用详解
本文为大家分享了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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下...2021-07-19
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- 这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
- 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧...2016-05-05
- 这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下...2016-06-24
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码,图文并茂介绍的非常详细,需要的朋友参考下吧...2017-01-23- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-30在laravel中使用Symfony的Crawler组件分析HTML
这篇文章主要介绍了在laravel中使用Symfony的Crawler组件分析HTML,需要的朋友可以参考下...2017-06-20- 本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-16
- 这篇文章主要介绍了浅析Bootstrap组件之面板组件 的相关资料,需要的朋友可以参考下...2016-05-05
- 这篇文章主要为大家详细介绍了vue弹窗组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-16
- 表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程,感兴趣的朋友一起学习吧...2016-04-27