ElementUI 分页EL-Pagination使用

ElementUI的分页标签
<el-pagination
@size-change=“handleSizeChange” //改变页面数据显示多少条
@current-change=“handleCurrentChange”//监听当前页码切换,之后新的页面值赋值给相关变量发送请求
:current-page=“queryInfo.pageNum”//绑定Vue data中的数据当前页码值
:page-sizes="[100, 200, 300, 400]" //页面设置成显示多少条数据
:page-size=“queryInfo.pageSize”//当前显示的页面是多少条数据
layout=“total, sizes, prev, pager, next, jumper”
:total=“total”> //绑定Vue Data中的总页面数

data中的数据

data(){
return{
//查询条件
queryInfo:{
type:3,
pageNum:1,
pageSize:5
},
//总数据条数
total:0,

}
}
methods中的方法
methods:{
//监听pagesize改变
handleSizeChange(newSize){
this.queryInfo.pageSize = newSize
// 发送请求
// this.getCateList()
},
//当前页码值变化触发(监听pageNum的改变)
handleCurrentChange(newPage){
this.queryInfo.pageNum = newPage
// 发送请求
// this.getCateList()
},

}