前端（Vue）实现自行分页的两种方法

前端做页面时，经常会遇到表格+分页的组合，有时因为一些原因，需要前端自己实现分页，下面介绍2种方法实现分页，

方法一：slice方法

slice(参数1，参数2)方法是返回一个新的数组对象 参数1：起始下标数 参数2：结束下标数(不计算在内) 如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3)

slice方法详细讲解

这个原理就和分页原理很相似，分页也是把一个很长的数组，按照每页多少条（size）分为若干个短数组 关键语句就一句：

//allData为全部数据，tableData是目前表格绑定的数据

this.tableData = this.allData.slice(

(this.page - 1) * this.size,

this.page * this.size

);

this.total=this.allData.length

下面是详细代码： 如果还是不能理解，可以用举例法为大家演示 data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] 总条目数total=20， 若设size=3（每页3条）

pagesizeslice( (page-1)×size , page×size )实际数据（表格）意义13[0,3)[0,1,2]截取数组下标为0—3（不含3）的数据23[3,6)[3,4,5]截取数组下标为3—6（不含6）的数据33[6,9)[6,7,8]截取数组下标为6—9（不含9）的数据43[9,12)[9,10,11]截取数组下标为9—12（不含12）的数据53[12,15)[12,13,14]截取数组下标为12—15（不含15）的数据

方法二：splice方法

splice方法可以理解为删除，与方法一的slice只差一个p字母 用splice分页，需要用到的有2个参数， splice(参数1，参数2) 参数1：从第几位开始 参数2：删除几个元素 如data:[1,2,3,4,5,6,7,8]，那么data.splice(0,3)就是从第0位开始，删除3个元素，即删除的元素为[1,2,3]，剩余元素为data:[4,5,6,7,8]，此方法会改变原数组

splice方法详细讲解

这个原理要和分页原理结合关联起来，如果一页3条数据，第一页就是从0位开始，删除的3个元素，即splice(0,3)，第二页就是从第3位开始，删除的3个元素，即splice（3,3） 因此用splice分页的关键语句就是：

let data=JSON.parse(JSON.stringify(this.allData))

this.tableData = data.splice(

(this.page - 1) * this.size,

this.size

);

this.total=this.allData.length

注意:splice会改变原数组，因为它使用一次，相当于原数组就被删除了一些元素，必须使用深拷贝先拷贝一份allData，然后再取被删除的元素赋值给tableData

其余代码不变，只是略微改变处理完整数据的方法 如果还是不能理解，依然用举例法为大家演示 data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] 由于深拷贝的原因，data可以等于完整的allData， 总条目数total=20， 若设size=3（每页3条）

pagesizesplice( (page-1)×size , size )实际数据（表格）意义13（0,3）[0,1,2]从第0位开始，删除的3个元素23（3,3）[3,4,5]从第3位开始，删除的3个元素33（6,3）[6,7,8]从第6位开始，删除的3个元素43（9,3）[9,10,11]从第9位开始，删除的3个元素53（12,3）[12,13,14]从第12位开始，删除的3个元素

两种方法的总结

方法名slice (参数1，参数2)splice(参数1，参数2)参数1(page-1)*size(page-1)*size参数2page*sizesize意义截取删除深浅拷贝浅拷贝深拷贝

最后完整代码如下：