vue2.0多條件搜索組件使用詳解
本文為大家分享了vue2.0多條件搜索組件的實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
搜索條件為死數(shù)據(jù),通過(guò)select下拉,選取多個(gè)條件;同時(shí)可點(diǎn)擊加號(hào)增加搜索條件,點(diǎn)擊減號(hào)減少搜索條件;
templete
<template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @click="seniorsearch('')" :class="[tabbtn==''?'checked':'']" >高級(jí)搜索</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" >文獻(xiàn)分類目錄</div> <div class="cataloghint"> <ul class="cataloglist" v-show="iscataloglist"> <li> <div class="checkbox"> <label> <input type="checkbox" v-model="cataloglist" value="核工業(yè)">核工業(yè) </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox" v-model="cataloglist" value="航天工業(yè)">航天工業(yè) </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox" v-model="cataloglist" value="航空工業(yè)">航空工業(yè) </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox" v-model="cataloglist" value="船舶工業(yè)">船舶工業(yè) </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox" v-model="cataloglist" value="兵器工業(yè)">兵器工業(yè) </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="國(guó)防綜合">國(guó)防綜合 </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:[],//文獻(xiàn)分類選中目錄 iscataloglist:false, titletype:[ { text: '標(biāo)題', value: 'title' }, { text: '正文', value: 'text' }, { text: '項(xiàng)目', value: 'project' }, { text: '人員', value: 'person' }, { text: '機(jī)構(gòu)', value: 'organization' }, { text: '技術(shù)', value: 'tech' }, { text: '地區(qū)', value: 'locaton' }, { text: '國(guó)家', value: 'country' } ], titletypeAuthor:[{ text: '作者', value: 'author' }], titletypeAuthor2:[{ text: '作者機(jī)構(gòu)', value: 'authoruint' }], accuracys: [ {text:'精確',value:'accurate'}, {text:'模糊',value:'blur'} ], containlists:[ {text:'并含',value:'andwidth'}, {text:'或含',value:'orwidth'}, {text:'不含',value:'nowidth'}, ], timestart:'nolimit',//檢索起始時(shí)間 timeend:'2017',//檢索結(jié)束時(shí)間 timestarts:[],//開(kāi)始時(shí)間選擇數(shù)組 timeends:[],//結(jié)束時(shí)間選擇數(shù)組 } }, 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 }//點(diǎn)擊檢索傳的數(shù)據(jù) console.log(body); } }, } </script>
css
<style scoped> /*臨時(shí)樣式*/ .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、為保證點(diǎn)擊加號(hào)出來(lái)的select標(biāo)簽的v-model不一樣,講v-model與v-for的item綁定;<divclass="formtips" v-for="(item,index) in formtips">
<selectclass="formcontrol" v-model="item.titletype" >
2、當(dāng)點(diǎn)擊減號(hào)使搜索條件只剩下一列時(shí),減號(hào)消失 <spanclass="tipsicon removeminus" @click="removeminus" v-show="formtips.length>=4" ></span>;同理給加號(hào)增加條件,通過(guò)長(zhǎng)度判斷,限制增加的檢索條件最多為6列,加號(hào)消失
3、點(diǎn)擊檢索后,使選中的檢索條件通過(guò)
let body={ formtips:this.formtips, cataloglist:this.cataloglist, timestart:this.timestart, timeend:this.timeend }
body傳遞
默認(rèn)
高級(jí)搜索
作者搜索
點(diǎn)擊減號(hào)
篩選條件三列,點(diǎn)擊檢索
控制臺(tái)輸出,點(diǎn)擊檢索要傳的值body
更多搜索功能實(shí)現(xiàn)的精彩文章,請(qǐng)點(diǎn)擊專題:javascript搜索功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框
- 利用vue + element實(shí)現(xiàn)表格分頁(yè)和前端搜索的方法
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能
- vue實(shí)現(xiàn)搜索功能
- Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
- Vue el-autocomplete遠(yuǎn)程搜索下拉框并實(shí)現(xiàn)自動(dòng)填充功能(推薦)
- vue組件實(shí)踐之可搜索下拉框功能
- 基于vue實(shí)現(xiàn)可搜索下拉框定制組件
- vuejs通過(guò)filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
- vue實(shí)現(xiàn)實(shí)時(shí)搜索顯示功能
相關(guān)文章
vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品數(shù)據(jù)效果實(shí)例代碼
本篇文章主要介紹了vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品效果實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2022-10-10Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解,實(shí)現(xiàn)此功能需要引入兩個(gè)插件,需要的朋友可以參考下2017-08-08vue?vue-touch移動(dòng)端手勢(shì)詳解
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢(shì)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01