- 首先在获取所有数据的时候,获取到总页数,并且赋值,便于后面调用
// 获取商品数据
async getGoodList () {
const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
if (res.meta.status !== 200) {
console.log(res.meta.status)
return this.$message.error('获取商品数据列表失败')
} else {
this.goodslist = res.data.goods
// 获取页面的总页数
this.total = res.data.total
}
},
- 在data中定义当前页码,总页码,当页显示的条数
data () {
return {
// 获取商品列表的参数对象
queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
// 当前每页显示的数据
pagesize: 2
},
// 当前总页数
total: 0,
goodslist: []
}
},
- 赋值element-ui官网的pagination模板,并且定义其中所有的值
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
4.最后将两个事件在methods中定义
// 监听pagesize改变事件
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getGoodList()
},
// 监听页码值改变的事件
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getGoodList()
}