ant design vue实现分页
2020-12-11 本文已影响0人
壹家全栈
如果我们是table分页,需要设置一下这个属性:
:pagination="false"
我们不用table自带的分页。
实现思路:
在data里面定义
data() {
return {
total:0,
pageIndex:1,
pageSize:10
}
}
分页必要参数有:total(总数,需要后台提供,再给你的list赋值的时候给total赋值即可)、pageSize(每页显示的条数)、pageIndex(当前页码),
<a-pagination :pageSize='pageSize' v-model="pageIndex" @change="pageChange" :total="total" show-less-items />
在pageChange函数里面,给当前页赋值,并且去执行查询列表函数
pageChange(current){
this.pageIndex=current;
this.getList();//给当前页赋值之后,自然是要去查询
}