input输入框通过v-model绑定query Info中的query查询参数,点击搜索的时候重新获取数据
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodList">
<el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>
</el-input>
data() {
return {
goodsList: [], // 商品列表
// 查询参数对象
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10,
},
total: 0,
};
},
async getGoodList() {
const { data: res } = await this.$http.get("goods", {
params: this.queryInfo,
});
console.log(res);
if (res.meta.status !== 200)
return this.$message.error("获取商品列表失败");
this.$message.success("获取商品列表成功");
this.goodsList = res.data.goods;
console.log(this.goodsList);
this.total = res.data.total;
}
分页
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
>
// 分页 -> 条数发生变化时触发
handleSizeChange(newSize){
this.queryInfo.pagesize = newSize
this.getGoodList()
},
// 分页 -> 页码发生变化时触发
handleCurrentChange(newPage){
this.queryInfo.pagenum = newPage
this.getGoodList()
}