分页完整功能
标签部分
<el-pagination
@size-change="SizeChange"
@current-change="CurrentChange"
:current-page="sendData.pagenum"
:page-sizes="[3, 10, 15, 20]"
:page-size="sendData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
data数据 => 抽取到对象中的目的是方便调用
sendData:{
query:'',
pagenum:1,
pagesize:3
},
// 总条数 (注意,这里不能为'' 字符串,会报错!)
total:0
// 分页触发的两个事件
SizeChange(size) {
// 保存回到sizechange函数触发时服务器返回的size,这个size是形参,作用是接收回调函数返回的数据
this.sendData.pagesize = size;
// 重新获取数据
this.search();
},
CurrentChange(current) {
// 保存
this.sendData.pagenum = current;
// 重新获取数据
this.search();
},
- 分页组件的页码，页容量，总条数动态的设置
- 页码：pagenum
- 页容量:pagesize
- 总条数:total(服务器返回的数据中存在)
- 点击页码
- 获取页码
- 调用接口获取对应的数据
- 点击页容量
- 获取页容量
- 调用接口获取对应的数据
