工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
| 后台-插件-广告管理-内容页头部广告（手机） |
文章目录
- 一、如何使用elementUI+vue实现前端分页
- 二、通用的前端分页代码
有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。
一、如何使用elementUI+vue实现前端分页
假如你用vue来实现，思路就是将数据切割，然后分批显示。
所以可以使用 computed 计算属性和 v-for 指令来实现前端分页。
因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。
如果我需要结合elementUI的分页组件，怎么实现呢？以下是实现方式，做得跟后端给的分页一样的效果。
<el-table :data="paginatedData" border style="width: 100%"> <el-table-column type="index" label="序号" :index="indexMethod" width="60" header-align="center" align="center"> el-table-column> <el-table-column prop="customerName" label="客户名称" min-width="130"> el-table-column> <el-table-column prop="chainName" label="业务名称" min-width="120"> el-table-column> <el-table-column prop="statisticsPeriod" label="统计周期" min-width="80"> el-table-column> <el-table-column prop="dateCycle" label="时间周期" min-width="150"> el-table-column> el-table> <div class="pagination-container"> <el-pagination background @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> export default { data() { return { list: [] //后端接口给的列表数据（未分页，全部返回） } }, created() { //请求后端数据 this.getList(); }, computed: { // 使用前端实现分页的计算数据 paginatedData() { // 分页的起始下标 const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum; // 分页的末尾下标 const endIndex = startIndex + this.listQuery.pageNum; // 返回切割后的数据 return this.list.slice(startIndex, endIndex); }, // 总条数 totalNum() { return this.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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
这样就可以实现前端分页了。
二、通用的前端分页代码
如果你的项目中，不是用elementUI框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。
以下是一个示例代码：
<template> <div> <ul v-for="item in paginatedData" :key="item.id"> <li>{{item.name}}li> ul> <div> <button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber"> {{ pageNumber }} button> div> div> template> <script> export default { data() { return { data: [], // 假如这里就是你通过接口获取到的所有的数据（未分页） itemsPerPage: 10, // 每页显示的数据量 currentPage: 1 // 当前页码 }; }, computed: { paginatedData() { const startIndex = (this.currentPage - 1) * this.itemsPerPage; const endIndex = startIndex + this.itemsPerPage; return this.data.slice(startIndex, endIndex); }, totalPages() { return Math.ceil(this.data.length / this.itemsPerPage); } } }; script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
在这个示例中，我们使用 v-for 指令来遍历每一页要显示的数据，并使用 slice() 方法来获取当前页码对应的数据。我们还计算了总页数，以便在分页控件中显示所有的页码。
在模板中，我们使用 v-for 指令来遍历每一页要显示的数据，并在分页控件中使用 v-for 指令来显示所有的页码。我们在每个页码按钮上绑定了一个 click 事件，点击按钮时会更新当前页码。
如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师！
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
在线投稿：投稿 站长QQ：1888636
| 后台-插件-广告管理-内容页尾部广告（手机） |
