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


Posted in Javascript onMarch 26, 2020

本文为大家分享了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传递
默认

高级搜索

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

作者搜索

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

点击减号

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

筛选条件三列,点击检索

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

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

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

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
javascript 实现map集合
Apr 03 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
python重试装饰器示例
2014/02/11 Python
Python的print用法示例
2014/02/11 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python自动化操作实现图例绘制
2020/07/09 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
《赵州桥》教学反思
2014/02/17 职场文书
投资合作协议书范本
2014/04/17 职场文书
行为习惯主题班会
2015/08/14 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript