第十七课 编写列表中的底部分页查询

一、编写分页查询html部分

  <el-pagination
    @size-change="handleSizeChage"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[100,200,300,400]"
    :page-size="pageSize"
    layout="total,sizes,prev,pager,next,jumper"
    :total="total">
  </el-pagination>

二、编写data部分

data(){
        return{
            bookinfolist: [],
            total:1, //总记录数
            currentPage:1,//当前页
            pageSize:10,//每页显示条数，为10条x
        }
},

三、编写切换分页逻辑

handleSizeChage(size){
   this.pageSize = size;
   this.fetchData();
}, 
handleCurrentChange(currentPage){
   this.currentPage = currentPage;
   this.fetchData();
},