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 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
如何让CI框架支持service层
2014/10/29 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
python获取文件扩展名的方法
2015/07/06 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python实现图片筛选程序
2018/10/24 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
致1500米运动员广播稿
2014/02/07 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
银行委托书范本
2014/04/04 职场文书
教师求职信范文
2014/05/24 职场文书
单位授权委托书范文
2014/08/02 职场文书
商务考察邀请函模板
2015/02/02 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python
vue特效之翻牌动画
2022/04/20 Vue.js