el-pagination分页组件前端实现纯前端分页使用方法

又是被后台欺负的一天。我做了一个公司的老项目。表单分页后端做不了，只能前端做。这里我介绍两种方法，需要自己提一下。1、实现思路：前端获取表中所有数据，然后对数据进行处理，然后进行分页操作。1、表格数据2、页面确定属性data(){return{currentPage:1,//当前页total:0,//列表项总数:[],//后台返回的所有结果tableData:[],//当前页码的表数据pageSize:10,//当前页容量pageSizes:[10,20,30,40,50],};},3.分页逻辑处理方法：{//切换每页容量handleSizeChange(val){this.currentPage=1;这个.pageSize=val;这。获取列表（）；},//切换当前页面handleCurrentChange(val){this.currentPage=val;这个.getList();},//获取表格数据getList(){getList().then((res)=>{this.list=res.data.data;//总数组this.total=res.data.data.length;//totalnumberthis.tableData=this.getNeedArr(this.list,this.pageSize)[this.currentPage-1]//当前页的表格数据});},//前端处理分页getNeedArr(array,size){//获取要除以指定长度的数组；参数1为分割总数组，参数2为数组分割后每个小数组的长度constlength=array.length;//如果不是数组，或者没有设置大小，且大小小于1，则返回空数组if(!length||!size||size<1){return[];}让索引=0;//用来表示切割元素范围开始让resIndex=0;//用于增加输出数组的下标//根据length和size计算输出数组的长度，并创建它letresult=newArray(Math.ceil(length/size));//循环while(index...2、分页表处理

3、页面定义属性data(){currentPage:1,//当前页面total:0,//条目总数tableData:[],//当前页码的表格数据pageSize:10,//当前页面容量pageSizes:[10,20,30,40,50],}4、分页方法的逻辑处理：{//切换每页容量的项目数handleSizeChange(val){this.currentPage=1;这.pageSize=val;这个.getList();},//切换当前页面handleCurrentChange(val){this.currentPage=val;这个.getList();},//获取表格数据getList(){getList().then((res)=>{this.total=res.data.data.length;//条目总数this.tableData=res.data.data;});},}两种方法都可以，第二种更简单