前端实现分页功能

前端实现分页功能，话不多说直接操作

这个是分页的element ui（pagesize是一页有多少条数据，currentPage是当前在第几页）

<div class="tablepage">
          <!-- -->
          <el-pagination
           	@size-change="handleSizeChange" 
          	@current-change="handleCurrentChange"
            :current-page="currentPage" 
            :page-size="pageSize" 
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>

这个是数据（这里用的假数据）

total: '',  // 总数据条数
currentPage: 1, // 当前页码
pageSize: 10, //每页个数
tableData: [], // 列表数据
table : [{ vouchernum: 0 },{ vouchernum: 1 }, { vouchernum: 2 }, { vouchernum: 3 }, 
{ vouchernum: 4 }, { vouchernum: 5 }, { vouchernum: 6 }, 
{ vouchernum: 7 }, { vouchernum: 8 }, { vouchernum: 9 },
 { vouchernum: 10 }, { vouchernum: 11 }, { vouchernum: 12 }, 
 { vouchernum: 13 }, { vouchernum: 14 }, { vouchernum: 15 },
  { vouchernum: 16 }, { vouchernum: 17 }, { vouchernum: 18 },
   { vouchernum: 19 }, { vouchernum: 20 }, { vouchernum: 21 }];

第一步：先把数据分页，这里table就是上面的数据源，tableData就是处理后每一页的数据。slice方法就是截取数组中的数据（可以去查一下很简单，这里不多讲）。pageSize就是每页有多少条数据，currentPage就是当前在第几页。a，b这两个式子就是规律总结出来的公式可以直接用（也可以自己写几个数，很简单就可以看出来）。最后别忘了total这个是总数据的条数

getmaterial() {
 	let a = (this.pageSize * (this.currentPage - 1))
 	let b = (this.pageSize * this.currentPage)
 	this.tableData = table.slice(a, b)
 	this.total = table.length
 }

写到这里，你会发现点击第二页或者更后面的页数据没有跳转，接下来实现数据跳转

 handleCurrentChange(val) {
      this.currentPage = val;
      this.getmaterial()
      console.log("当前页", val)
 }

这样最简单的分页就实现了，具体情况结合具体数据，欢迎大家评论区留言更好的方法，让我也学习学习。