搜索条件为死数据，通过select下拉，选取多个条件；同时可点击加号增加搜索条件，点击减号减少搜索条件；
templete
<template> <div> <div> <a @click="seniorsearch('')" :class="[tabbtn==''?'checked':'']" >高级搜索</a> <a @click="seniorsearch('author')" :class="[tabbtn=='author'?'checked':'']" >作者搜索</a> </div> <div> <div> <div> <span @click="addplus" v-show="formtips.length<12"></span> <span @click="removeminus" v-show="formtips.length>=4"></span> </div> <div> <div v-for="(item,index) in formtips"> <div> <select 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> <input type="text" v-model="item.typeinp"> </div> <div> <select > <option v-for="accuracy in accuracys" :value="accuracy.value">{{accuracy.text}}</option> </select> </div> <div> <select v-model="item.containlist"> <option v-for="containlist in containlists" :value="containlist.value">{{containlist.text}}</option> </select> </div> </div> </div> <div> <div> <div @click="catalogshow" >文献分类目录</div> <div> <ul v-show="iscataloglist"> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="核工业">核工业 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="航天工业">航天工业 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="航空工业">航空工业 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="船舶工业">船舶工业 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="兵器工业">兵器工业 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="军工电子">军工电子 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="国防综合">国防综合 </label> </div> </li> <li> <div> <label> <input type="checkbox" v-model="cataloglist" value="其他">其他 </label> </div> </li> </ul> </div> </div> </div> <div> <div> <select v-model="timestart"> <option v-for="startlist in timestarts" :value="startlist.value">{{startlist.text}}</option> </select> <span>——</span> <select v-model="timeend"> <option v-for="endlist in timeends" :value="endlist.value">{{endlist.text}}</option> </select> </div> </div> <div> <button type="button" @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