前端实现el-pagination分页的两种业务场景,你知道吗？
💌 作者简介
- 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【
前端领域创作者】😜 - 📜 CSDN主页：水香木鱼
- 📑 个人博客：陈春波
- 🎨 系列专栏：后台管理系统
- 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
- 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。
场景1【后端以单页的形式返回】适用于处理数据量大的表格
思路： 前端去请求一次分页，后端返回对应的分页
演示效果：
①表格数据
<el-table :data="tableData" width="100%" lazy border> <el-table-column prop="dailyDate" label="日期" width="80" align="center" > </el-table-column> <el-table-column prop="workType" label="工作类型" width="80" align="center" > </el-table-column> <el-table-column prop="standardContent" label="事件类型" width="180" align="center" ></el-table-column> <el-table-column prop="jobContent" label="事件分项" width="180" align="center" ></el-table-column> <el-table-column prop="content" label="内容" align="center" width="180" > </el-table-column> <el-table-column prop="createDateTime" label="时间" align="center" width="140" > </el-table-column> <el-table-column prop="location" label="地址" align="center"> </el-table-column> <el-table-column prop="unit" label="单位" align="center"> </el-table-column> <el-table-column prop="trainNumber" label="车次" align="center"> </el-table-column> </el-table> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="currentTotal" />②定义分页属性
data() { return { currentPage: 1, pageSize: 10, currentTotal: 0, tableData: [], //当前页码的表格数据 }}③分页逻辑处理
methods: { handleSizeChange(val) { this.pageSize = val }, handleCurrentChange(val) { this.currentPage = val //点击下一页的时候 重新调用接口从后端取分页数据;{ current: this.currentPage } 为传给后端的字段 logList({ current: this.currentPage }).then(res => { this.tableData = res.result }) }, //获取表格数据 getList() { //封装的请求接口 方式 logList().then(res => { this.tableData = res.result this.currentTotal = res.page.total//获取后端返回的分页（总条数） }) }, } ④初始化时调用
created() { this.getList() //初始化调用数据 }场景2【纯前端实现分页】适用于处理数据量小的表格
实现思路：前端拿到表格的所有数据，然后对数据进行处理，紧接着操作分页。
缺点：不适合数据量大的表格
①表格数据
<template> <div class="home"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="phone" label="电话" width="180"></el-table-column> <el-table-column prop="userName" label="用户名"></el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 50, 100]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div></template>②定义分页属性
data() { return { currentPage: 1, //当前页 total: 0, //总条数 list: [], //后台返回的所有结果 tableData: [], //当前页码的表格数据 pageSize: 20, //当前页容量 }; },③分页逻辑处理
methods: { //切换每页条数容量 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; this.getList(); }, //切换当前页 handleCurrentChange(val) { this.currentPage = val; this.getList(); }, //获取表格数据 getList() { API.getList().then((res) => { this.list = res.data.data; //总数组 this.total = res.data.data.length; //总条数 this.tableData = this.getNeedArr(this.list,this.pageSize)[this.currentPage - 1] //当前页的表格数据 //console.log(this.tableData); }); }, //纯前端处理分页，进行长度分割 getNeedArr(array, size) {//获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度 const length = array.length; //判断不是数组，或者size没有设置，size小于1，就返回空数组 if (!length || !size || size < 1) { return []; } //核心部分 let index = 0; //用来表示切割元素的范围start let resIndex = 0; //用来递增表示输出数组的下标 //根据length和size算出输出数组的长度，并且创建它。 let result = new Array(Math.ceil(length / size)); //进行循环 while (index < length) { //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。 result[resIndex++] = array.slice(index, (index += size)); } //输出到新数组 return result; }, },④初始化调用
created() { this.getList(); },import * as API from "@/api/pageRequest/home.js"; 请求的后端接口 【在这里就不做详细说明了，目前大多数公司都是二次封装axios，会搬就行啦！】
📖 博主致谢
感谢大家阅读到结尾，本次的文章就分享到这里，总结了【前端实现分页的两种业务场景】，希望可以帮到大家，谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩：
一键图解iframe标签属性以及使用
iframe标签嵌套页面时，如何让页面内的高度自适应
Adobe Photoshop CS6 仅需要两个步骤快速去除图片中的文字
Adobe Photoshop CS6 缩小图片保持不失真的最佳方案
最详细的教程，教你如何彻底关闭Chrome浏览器自动更新
