script
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
.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;
}
1、为保证点击加号出来的select标签的v-model不一样，讲v-model与v-for的item绑定；
2、当点击减号使搜索条件只剩下一列时，减号消失<
3、点击检索后，使选中的检索条件通过
body传递 默认
高级搜索
作者搜索
点击减号
筛选条件三列，点击检索
控制台输出，点击检索要传的值body
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/39470.html