vue2.0多条件搜索组件使用分析

内容摘要
这篇文章主要为大家详细介绍了vue2.0多条件搜索组件使用分析，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文为大家分享了vue2.0多条
文章正文

这篇文章主要为大家详细介绍了vue2.0多条件搜索组件使用分析，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

本文为大家分享了vue2.0多条件搜索组件的实现方法，供大家参考，具体内容如下

搜索条件为死数据，通过select下拉，选取多个条件；同时可点击加号增加搜索条件，点击减号减少搜索条件；

templete

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<code>
<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> </code>

script

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<code>
<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> </code>

css

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<code>
<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> </code>

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、点击检索后，使选中的检索条件通过

代码如下：

1
2
3
4
5
6
7
8
9
10
<strong><strong><strong><strong>
<code>
let body={
 formtips:this.formtips,
 cataloglist:this.cataloglist,
 timestart:this.timestart,
 timeend:this.timeend
}
 
</code></strong></strong></strong></strong>

body传递默认

高级搜索

【图片暂缺】

作者搜索

【图片暂缺】

点击减号

【图片暂缺】

筛选条件三列，点击检索

【图片暂缺】

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

【图片暂缺】

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。

注：关于vue2.0多条件搜索组件使用分析的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇vue2.0实现分页组件的实例代码下一篇关于vue-router的beforeEach无限循环的问题解决

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！