基于elementUI分页组件实现前端分页功能
对于后端返回数据为进行分页的情况，前端可基于elementUI的分页组件实现分页效果。
第一步，使用前端分页组件
:data="list" border @select="handleSelectionChange" @select-all="handleAllSelectionChange" > ... background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum" > 第二步、使用computed计算属性得到分页参数 computed: { // 使用前端实现分页的计算数据 list() { // 分页的起始下标 const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum; // 分页的末尾下标 const endIndex = startIndex + this.listQuery.pageNum; // 返回切割后的数据 return this.requestList.slice(startIndex, endIndex); }, // 总条数 totalNum() { return this.requestList.length; }, // 总分页数 total() { return Math.ceil(this.requestList.length / this.listQuery.pageNum); }, }, data(){ return{ // 列表数据 requestList: [], // 分页参数 listQuery: { page: 1, pageNum: 10, }, } } 第三步、绑定事件 // 每页列表数 handleSizeChange(val) { this.listQuery.pageNum = val; }, // 当前分页数（第几页） handleCurrentChange(val) { this.listQuery.page = val; }, 参考文章 大家都在找： 前端：前端面试题2024 elementui：elementui官网入口 javascript：javascript:; vue.js：vue.js官网
您阅读本篇文章共花了：
发表评论