前端(Vue)实现自行分页的两种方法

148 阅读1分钟

前端做页面时,经常会遇到表格+分页的组合,有时因为一些原因,需要前端自己实现分页,下面介绍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条)

image.png

原文链接:blog.csdn.net/Sunshine__G…