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

发布时间：2020-12-17 02:58:42 所属栏目：百科来源：网络整理

导读：本文为大家分享了vue2.0多条件搜索组件的实现方法，供大家参考，具体内容如下搜索条件为死数据，通过select下拉，选取多个条件；同时可点击加号增加搜索条件，点击减号减少搜索条件； templete =4" 文献分类目录 —— script css 1、为保证点击加号出来的se

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

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

templete

文献分类目录

——

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',}
];
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'},]
},addplus:function () {
if(this.tabbtn==''){
this.formtips.push({
titletype:'title',});
this.formtips.push({
titletype:'title',});
}else{
this.formtips.push({
titletype:'author',});
this.formtips.push({
titletype:'authoruint',});
}

},removeminus:function () {
this.formtips.splice(-2);
},seniorsearch:function (str) {
if(this.tabbtn!=str){
this.tabbtn = str;
if(this.tabbtn==''){
this.formtips=[
{
titletype:'title',}
];
}else{
this.formtips=[
{
titletype:'author',{
titletype:'authoruint',{
titletype:'author',}
]
}
}
},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);
}

},}

css

/*临时样式*/ .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;
}