vue2.0多條件搜索組件使用詳解
更新時(shí)間：2020年03月26日 16:17:39 作者：奈奈冪
這篇文章主要為大家詳細(xì)介紹了vue2.0多條件搜索組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了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)分類(lèi)目錄</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)分類(lèi)選中目錄
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)擊專(zhuā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-07
Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解,實(shí)現(xiàn)此功能需要引入兩個(gè)插件，需要的朋友可以參考下2017-08-08
vue?vue-touch移動(dòng)端手勢(shì)詳解
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢(shì)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue 解除鼠標(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-11
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue使用Canvas繪制圖片、矩形、線(xiàn)條、文字，下載圖片
這篇文章主要介紹了Vue使用Canvas繪制圖片、矩形、線(xiàn)條、文字，下載圖片的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue中關(guān)于@media媒體查詢(xún)的使用
這篇文章主要介紹了vue中關(guān)于@media媒體查詢(xún)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01