前端结合elementui实现分页功能

在elementUI中使用table组件完成页面的大概框架，并且使用Pagination分页组件---tips：这里不是重点，不做过多阐述

步骤：

通过Axios把数据全部渲染到页面上使用el-pagination分页组件，定义分页中的基础数据（每页显示多少数据，数据总条数等）定义一个新的储存页面数据的newtableData，在获取到数据后暂时存在其中定义函数getTableData()操作页面数据，tableData = newtableData数组中截取：当前页数-1）*当页显示的条数，当前页数*，每页显示数------>这里就是一个数组中的截取。通过分页组件的页面改变等事件调用gettableData（）每次给页面重新渲染数据

下面是部分的关键代码

getTableData函数：把整体数据经过截取渲染在tableData中

getTableData(){ this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number) },

分页组件获取当前的页面值

handleSizeChange(val) { this.number = val if(this.searchText === ""){ this.getTableData() } }, //获取当前页面值 handleCurrentChange(val) { this.currentPage = val if(this.searchText === ""){ this.getTableData() } },

分页组件

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 9, 13,20]" :page-size="number" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

文章仅供复习以及大家参考用，欢迎大家评论指正