工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办

文章目录

有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。

一、如何使用elementUI+vue实现前端分页

假如你用vue来实现，思路就是将数据切割，然后分批显示。

所以可以使用

computed

计算属性和

v-for

指令来实现前端分页。

因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。

如果我需要结合

elementUI

的分页组件，怎么实现呢？以下是实现方式，做得跟后端给的分页一样的效果。

<!--这里的paginatedData就是根据list进行切割的计算属性--><el-table:data="paginatedData"borderstyle="width: 100%"><el-table-columntype="index"label="序号":index="indexMethod"width="60"header-align="center"align="center"></el-table-column><el-table-columnprop="customerName"label="客户名称"min-width="130"></el-table-column><el-table-columnprop="chainName"label="业务名称"min-width="120"></el-table-column><el-table-columnprop="statisticsPeriod"label="统计周期"min-width="80"></el-table-column><el-table-columnprop="dateCycle"label="时间周期"min-width="150"></el-table-column></el-table><!--这里的pagination分页组件不需要做任何改动--><divclass="pagination-container"><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="listQuery.page":page-sizes="[10, 30, 50]":page-size="listQuery.pageNum"layout="total, sizes, prev, pager, next, jumper":total="totalNum"></el-pagination></div><script>exportdefault{data(){return{list:[]//后端接口给的列表数据（未分页，全部返回）}},created(){//请求后端数据this.getList();},computed:{// 使用前端实现分页的计算数据paginatedData(){// 分页的起始下标const startIndex =(this.listQuery.page -1)*this.listQuery.pageNum;// 分页的末尾下标const endIndex = startIndex +this.listQuery.pageNum;// 返回切割后的数据returnthis.list.slice(startIndex, endIndex);},// 总条数totalNum(){returnthis.list.length;},// 总分页数total(){return Math.ceil(this.list.length /this.listQuery.pageNum);}},methods:{//数据getList(){//调用后端接口staticsList().then((res)=>{this.list = res.data;});},// 每页列表数handleSizeChange(val){this.listQuery.pageNum = val;},// 当前分页数（第几页）handleCurrentChange(val){this.listQuery.page = val;},}}</script>

这样就可以实现前端分页了。

二、通用的前端分页代码

如果你的项目中，不是用

elementUI

框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。

以下是一个示例代码：

<template><div><ulv-for="item in paginatedData":key="item.id"><!-- 显示需要显示的数据 --><li>{{item.name}}</li></ul><div><!-- 显示分页控件 --><buttonv-for="pageNumber in totalPages":key="pageNumber"@click="currentPage = pageNumber">
        {{ pageNumber }}
      </button></div></div></template><script>exportdefault{data(){return{data:[],// 假如这里就是你通过接口获取到的所有的数据（未分页）itemsPerPage:10,// 每页显示的数据量currentPage:1// 当前页码};},computed:{paginatedData(){const startIndex =(this.currentPage -1)*this.itemsPerPage;const endIndex = startIndex +this.itemsPerPage;returnthis.data.slice(startIndex, endIndex);},totalPages(){return Math.ceil(this.data.length /this.itemsPerPage);}}};</script>

在这个示例中，我们使用

v-for

指令来遍历每一页要显示的数据，并使用

slice()

方法来获取当前页码对应的数据。我们还计算了总页数，以便在分页控件中显示所有的页码。

在模板中，我们使用

v-for

指令来遍历每一页要显示的数据，并在分页控件中使用

v-for

指令来显示所有的页码。我们在每个页码按钮上绑定了一个

click

事件，点击按钮时会更新当前页码。

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！