用element-ui搭建搜索页面
<!-- 搜索 -->
<el-input placeholder="请输入内容" v-model="input" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="userlist"></el-button>
</el-input>效果如下
输入框input中v-model绑定的input在data里面定义一下，在我们获取页面数据的时候传一个参数到后端，跟分页的数据一起传给后端
// 获取数据
async userlist(){
var r=await this.http.get('getlist',{
params: {
pagenum: this.pagenum,
pagesize: this.pagesize,
input:this.input
},
})
console.log(r);
if(r.data.code==200){
this.datalist=r.data.data
this.total=r.data.count
}
}后端使用find方法，使用RegExp模糊查找
router.get('/getlist',async(req,res)=>{
var limit = req.query.pagenum;
var page = req.query.pagesize;
var sk = (page - 1) * limit;
var input=RegExp(req.query.input)
var count = await user.find({username:input}).count();
//username是要搜索的字段
var r = await user.find({username:input}).skip(sk).limit(limit);
res.json({code:200,data:r,count})
})
