团队冲刺(1)
今天完成:
高级搜索
<template> <div class="show" style="background-color: white"> <el-row style="flex-direction: column"> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type1" slot="prepend" placeholder="请选择" @change="typeChange"> <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> <el-option label="篇名" value="name"></el-option> <el-option label="参考文献" value="look"></el-option> <el-option label="文献来源" value="rouse"></el-option> </el-select> <el-button slot="append" type="primary" @click.native.prevent="search" icon="el-icon-search" >搜索 </el-button> </el-input> </el-col> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type2" slot="prepend" placeholder="请选择" @change="typeChange" > <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> </el-select> <el-button slot="append" type="primary" @click.native.prevent="search" icon="el-icon-search" >搜索 </el-button> </el-input> </el-col> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type3" slot="prepend" placeholder="请选择" @change="typeChange" > <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> </el-select> <el-button slot="append" type="primary" @click.native.prevent="search" icon="el-icon-search" >搜索 </el-button> </el-input> </el-col> </el-row> </div> </template> <script> export default { data(){ return{ currentPage: 1, // 初始页码 pageSize: 10, // 每页的数据 total: 0, // 总记录数 keyword: '', // 关键词 type1: '', //查询方式 type2: '', //查询方式 type3: '', //查询方式 contents: [] //查询结果 } }, }; </script> <style> .show { margin: 100px auto; width: 80%; height: 450px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); border-radius: 10px; font-size: 20px; } /* .show:hover { box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4); margin-top: 90px; } */ </style>
预计明天完善高搜索功能,
遇到的问题:
<el-row> 的间隔修改,属性的应用。
垂直分布和水平分布,页面的调整

浙公网安备 33010602011771号