vue实现分页

一、如何在不适用组件的前提下实现分页渲染，主要有以下四个基本参数

1、数据的总条数，就是数据的length，dataList.length

2、每页显示的限制条数，limit

3、通过length和limit计算得出的总页数

//总页数
    allPage() {
      return Math.ceil(this.dataList.length / this.limit)
    },

4、当前在第几页，page

二、通过基本参数确定渲染的开始下标(start)和结束下标(end)

首先思考，假如limit=3，dataList.length=10，可得allPage=4

页码	start	end
1	0	2
2	3	5
3	6	8
4	9

得出规律：

start() {
      return (this.page - 1) * this.limit
    },
end() {
      return this.page * this.limit
    },

三、依据start和end，用slice进行渲染

   
          {{ item.id }}
          {{ item.uname }}
          {{ item.price }}
        

四、总结

相较于原生js的分页，四个基本参数相同，start和end的计算逻辑相同，优点是利用数据的实时响应，避免频繁修改参数，减少代码量。