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

<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>  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> 

<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> 

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