前端框架代码

 <div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>

data中进行数据初始化
 

javascript">data() {return {    totals: 0,pageSize: 2,currentPage: 1
}
}

对应的js代码

javascript"> methods: {getParent() {getPatientList(this.currentPage, this.pageSize).then(res => {this.tableData = res.data.listthis.totals = res.data.total})},handleSizeChange(val) {this.pageSize = valthis.getParent()console.log(`每页 ${val} 条`)},handleCurrentChange(val) {this.currentPage = valthis.getParent()console.log(`当前页: ${val}`)}
}

后端开发方法

这里使用的是mybatis，所有需要使用pagehelper进行分页

javascript"> <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.7</version></dependency>

后端使用

PageInfo，并将pageNO和pageSize作为参数传入后端，就可以完成分页了