当前位置: 首页 > news >正文

前端分页处理

页面中实现的分页效果,要么后端提供接口,每次点击下一页就调用接口,若不提供接口,分页得前端自己去截取。

 

方法一:slice方法
slice(参数1,参数2)方法是返回一个新的数组对象,左开右闭
参数1:起始下标数
参数2:结束下标数(不计算在内)
如data:[1,2,3,4,5,6,7,8],那么data.slice(0,3)就为下标为0,1,2,不包括下标为3的数,即[1,2,3],可以看成数学中的[0,3)

slice方法详细讲解

这个原理就和分页原理很相似,分页也是把一个很长的数组,按照每页多少条(size)分为若干个短数组

 //allData为全部数据,tableData是目前表格绑定的数据
    (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total=this.allData.length


下面是详细代码:


比如:data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
总条目数total=20,
若设size=3(每页3条)

 

 
方法二:splice方法
splice方法可以理解为删除,与方法一的slice只差一个p字母
用splice分页,需要用到的有2个参数,
splice(参数1,参数2)
参数1:从第几位开始
参数2:删除几个元素
如data:[1,2,3,4,5,6,7,8],那么data.splice(0,3)就是从第0位开始,删除3个元素,即删除的元素为[1,2,3],剩余元素为data:[4,5,6,7,8],此方法会改变原数组

splice方法详细讲解

这个原理要和分页原理结合关联起来,如果一页3条数据,第一页就是从0位开始,删除的3个元素,即splice(0,3),第二页就是从第3位开始,删除的3个元素,即splice(3,3)
因此用splice分页的关键语句就是:

      let data=JSON.parse(JSON.stringify(this.allData))
      this.tableData = data.splice(
        (this.page - 1) * this.size,
        this.size
      );
      this.total=this.allData.length

注意:splice会改变原数组,因为它使用一次,相当于原数组就被删除了一些元素,必须使用深拷贝先拷贝一份allData,然后再取被删除的元素赋值给tableData 。

其余代码不变,只是略微改变处理完整数据的方法

比如:
data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
由于深拷贝的原因,data可以等于完整的allData,
总条目数total=20,
若设size=3(每页3条)

两种方法的总结

最后完整代码如下:

 

  1. <template>
  2. <div>
  3. <el-table :data="tableData" border>
  4. <el-table-column label="序号" type="index" width="50">
  5. </el-table-column>
  6. <el-table-column prop="date" label="日期" width="180">
  7. </el-table-column>
  8. <el-table-column prop="name" label="姓名" width="180">
  9. </el-table-column>
  10. <el-table-column prop="address" label="地址">
  11. </el-table-column>
  12. </el-table>
  13. <el-pagination @size-change="sizeChange" @current-change="currentChange"
  14. :current-page="page" :page-size="size" :page-sizes="pageSizes"
  15. layout="total, sizes, prev, pager, next, jumper" :total="total">
  16. </el-pagination>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. page: 1, //第几页
  24. size: 3, //一页多少条
  25. total: 0, //总条目数
  26. pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
  27. tableData: [], //表格绑定的数据
  28. allData: [
  29. {
  30. date: "2016-05-02",
  31. name: "王小虎1",
  32. address: "上海市普陀区金沙江路 1518 弄",
  33. },
  34. {
  35. date: "2016-05-04",
  36. name: "王小虎2",
  37. address: "上海市普陀区金沙江路 1517 弄",
  38. },
  39. {
  40. date: "2016-05-01",
  41. name: "王小虎3",
  42. address: "上海市普陀区金沙江路 1519 弄",
  43. },
  44. {
  45. date: "2016-05-03",
  46. name: "王小虎4",
  47. address: "上海市普陀区金沙江路 1516 弄",
  48. },
  49. {
  50. date: "2016-05-02",
  51. name: "王小虎5",
  52. address: "上海市普陀区金沙江路 1518 弄",
  53. },
  54. {
  55. date: "2016-05-04",
  56. name: "王小虎6",
  57. address: "上海市普陀区金沙江路 1517 弄",
  58. },
  59. {
  60. date: "2016-05-01",
  61. name: "王小虎7",
  62. address: "上海市普陀区金沙江路 1519 弄",
  63. },
  64. {
  65. date: "2016-05-03",
  66. name: "王小虎8",
  67. address: "上海市普陀区金沙江路 1516 弄",
  68. },
  69. {
  70. date: "2016-05-02",
  71. name: "王小虎9",
  72. address: "上海市普陀区金沙江路 1518 弄",
  73. },
  74. {
  75. date: "2016-05-04",
  76. name: "王小虎10",
  77. address: "上海市普陀区金沙江路 1517 弄",
  78. },
  79. {
  80. date: "2016-05-01",
  81. name: "王小虎11",
  82. address: "上海市普陀区金沙江路 1519 弄",
  83. },
  84. {
  85. date: "2016-05-03",
  86. name: "王小虎12",
  87. address: "上海市普陀区金沙江路 1516 弄",
  88. },
  89. {
  90. date: "2016-05-02",
  91. name: "王小虎13",
  92. address: "上海市普陀区金沙江路 1518 弄",
  93. },
  94. {
  95. date: "2016-05-04",
  96. name: "王小虎14",
  97. address: "上海市普陀区金沙江路 1517 弄",
  98. },
  99. {
  100. date: "2016-05-01",
  101. name: "王小虎15",
  102. address: "上海市普陀区金沙江路 1519 弄",
  103. },
  104. {
  105. date: "2016-05-03",
  106. name: "王小虎16",
  107. address: "上海市普陀区金沙江路 1516 弄",
  108. },
  109. {
  110. date: "2016-05-02",
  111. name: "王小虎17",
  112. address: "上海市普陀区金沙江路 1518 弄",
  113. },
  114. {
  115. date: "2016-05-04",
  116. name: "王小虎18",
  117. address: "上海市普陀区金沙江路 1517 弄",
  118. },
  119. {
  120. date: "2016-05-01",
  121. name: "王小虎19",
  122. address: "上海市普陀区金沙江路 1519 弄",
  123. },
  124. {
  125. date: "2016-05-03",
  126. name: "王小虎20",
  127. address: "上海市普陀区金沙江路 1516 弄",
  128. },
  129. {
  130. date: "2016-05-02",
  131. name: "王小虎21",
  132. address: "上海市普陀区金沙江路 1518 弄",
  133. },
  134. {
  135. date: "2016-05-04",
  136. name: "王小虎22",
  137. address: "上海市普陀区金沙江路 1517 弄",
  138. },
  139. {
  140. date: "2016-05-01",
  141. name: "王小虎23",
  142. address: "上海市普陀区金沙江路 1519 弄",
  143. },
  144. {
  145. date: "2016-05-03",
  146. name: "王小虎24",
  147. address: "上海市普陀区金沙江路 1516 弄",
  148. },
  149. {
  150. date: "2016-05-02",
  151. name: "王小虎25",
  152. address: "上海市普陀区金沙江路 1518 弄",
  153. },
  154. {
  155. date: "2016-05-04",
  156. name: "王小虎26",
  157. address: "上海市普陀区金沙江路 1517 弄",
  158. },
  159. {
  160. date: "2016-05-01",
  161. name: "王小虎27",
  162. address: "上海市普陀区金沙江路 1519 弄",
  163. },
  164. {
  165. date: "2016-05-03",
  166. name: "王小虎28",
  167. address: "上海市普陀区金沙江路 1516 弄",
  168. },
  169. {
  170. date: "2016-05-02",
  171. name: "王小虎29",
  172. address: "上海市普陀区金沙江路 1518 弄",
  173. },
  174. {
  175. date: "2016-05-04",
  176. name: "王小虎30",
  177. address: "上海市普陀区金沙江路 1517 弄",
  178. },
  179. {
  180. date: "2016-05-01",
  181. name: "王小虎31",
  182. address: "上海市普陀区金沙江路 1519 弄",
  183. },
  184. {
  185. date: "2016-05-03",
  186. name: "王小虎32",
  187. address: "上海市普陀区金沙江路 1516 弄",
  188. },
  189. {
  190. date: "2016-05-02",
  191. name: "王小虎33",
  192. address: "上海市普陀区金沙江路 1518 弄",
  193. },
  194. {
  195. date: "2016-05-04",
  196. name: "王小虎34",
  197. address: "上海市普陀区金沙江路 1517 弄",
  198. },
  199. {
  200. date: "2016-05-01",
  201. name: "王小虎35",
  202. address: "上海市普陀区金沙江路 1519 弄",
  203. },
  204. {
  205. date: "2016-05-03",
  206. name: "王小虎36",
  207. address: "上海市普陀区金沙江路 1516 弄",
  208. },
  209. {
  210. date: "2016-05-02",
  211. name: "王小虎37",
  212. address: "上海市普陀区金沙江路 1518 弄",
  213. },
  214. {
  215. date: "2016-05-04",
  216. name: "王小虎38",
  217. address: "上海市普陀区金沙江路 1517 弄",
  218. },
  219. {
  220. date: "2016-05-01",
  221. name: "王小虎39",
  222. address: "上海市普陀区金沙江路 1519 弄",
  223. },
  224. {
  225. date: "2016-05-03",
  226. name: "王小虎40",
  227. address: "上海市普陀区金沙江路 1516 弄",
  228. },
  229. {
  230. date: "2016-05-02",
  231. name: "王小虎41",
  232. address: "上海市普陀区金沙江路 1518 弄",
  233. },
  234. {
  235. date: "2016-05-04",
  236. name: "王小虎42",
  237. address: "上海市普陀区金沙江路 1517 弄",
  238. },
  239. {
  240. date: "2016-05-01",
  241. name: "王小虎43",
  242. address: "上海市普陀区金沙江路 1519 弄",
  243. },
  244. {
  245. date: "2016-05-03",
  246. name: "王小虎44",
  247. address: "上海市普陀区金沙江路 1516 弄",
  248. },
  249. {
  250. date: "2016-05-02",
  251. name: "王小虎45",
  252. address: "上海市普陀区金沙江路 1518 弄",
  253. },
  254. {
  255. date: "2016-05-04",
  256. name: "王小虎46",
  257. address: "上海市普陀区金沙江路 1517 弄",
  258. },
  259. {
  260. date: "2016-05-01",
  261. name: "王小虎47",
  262. address: "上海市普陀区金沙江路 1519 弄",
  263. },
  264. {
  265. date: "2016-05-03",
  266. name: "王小虎48",
  267. address: "上海市普陀区金沙江路 1516 弄",
  268. },
  269. {
  270. date: "2016-05-02",
  271. name: "王小虎49",
  272. address: "上海市普陀区金沙江路 1518 弄",
  273. },
  274. {
  275. date: "2016-05-04",
  276. name: "王小虎50",
  277. address: "上海市普陀区金沙江路 1517 弄",
  278. },
  279. {
  280. date: "2016-05-01",
  281. name: "王小虎51",
  282. address: "上海市普陀区金沙江路 1519 弄",
  283. },
  284. {
  285. date: "2016-05-03",
  286. name: "王小虎52",
  287. address: "上海市普陀区金沙江路 1516 弄",
  288. },
  289. ],
  290. };
  291. },
  292. methods: {
  293. //获取表格数据,自行分页(slice)
  294. getTabelData() {
  295. //allData为全部数据
  296. this.tableData = this.allData.slice(
  297. (this.page - 1) * this.size,
  298. this.page * this.size
  299. );
  300. this.total=this.allData.length
  301. },
  302. //获取表格数据,自行分页(splice)
  303. getTabelData2() {
  304. let data=JSON.parse(JSON.stringify(this.allData))
  305. this.tableData = data.splice(
  306. (this.page - 1) * this.size,
  307. this.size
  308. );
  309. this.total=this.allData.length
  310. },
  311. //page改变时的回调函数,参数为当前页码
  312. currentChange(val) {
  313. console.log("翻页,当前为第几页", val);
  314. this.page = val;
  315. this.getTabelData2();
  316. },
  317. //size改变时回调的函数,参数为当前的size
  318. sizeChange(val) {
  319. console.log("改变每页多少条,当前一页多少条数据", val);
  320. this.size = val;
  321. this.page = 1;
  322. this.getTabelData2();
  323. },
  324. },
  325. created() {
  326. this.getTabelData2();
  327. },
  328. };
  329. </script>

相关文章:

前端分页处理

页面中实现的分页效果&#xff0c;要么后端提供接口&#xff0c;每次点击下一页就调用接口&#xff0c;若不提供接口&#xff0c;分页得前端自己去截取。 方法一&#xff1a;slice方法 slice(参数1&#xff0c;参数2)方法是返回一个新的数组对象&#xff0c;左开右闭 参数1&…...

【C语言】位操作符的一些题目与技巧

初学者在学完位操作符之后&#xff0c;总是不能很好的掌握&#xff0c;因此这篇文章旨在巩固对位操作符的理解与使用。 有的题目可能会比较难以接受&#xff0c;但是看完一定会有收获 目录 位操作符&#xff1a;一些题目&#xff1a;不创建临时变量交换整数整数转换二进制中1的…...

爬虫逆向实战(二十二)--某恩数据电影票房

一、数据接口分析 主页地址&#xff1a;某恩数据 1、抓包 通过抓包可以发现数据接口是API/GetData.ashx 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 通过查看“响应”模块可以发现&#xff0c;响应是…...

火山引擎发布自研视频编解码芯片

2023年8月22日&#xff0c;火山引擎视频云宣布其自研的视频编解码芯片已成功出片。经验证&#xff0c;该芯片的视频压缩效率相比行业主流硬件编码器可提升30%以上&#xff0c;未来将服务于抖音、西瓜视频等视频业务&#xff0c;并将通过火山引擎视频云开放给企业客户。 火山引…...

投递技术类简历的注意事项

简历修改的背景 作为程序员&#xff0c;随着工作年限的增加&#xff0c;要定期的去修改自己的简历中的工作项目&#xff0c;一方面可以促进自己复盘一下工作成果和个人成长&#xff0c;另外也能给自己换工作提供一个前置的便捷性。 注意事项 修改简历的时候有哪些需要注意的…...

每日一题——柱状图中最大的矩形

柱状图中最大的矩形 题目链接 用什么数据结构&#xff1f; 要得到柱状图中最大的矩形&#xff0c;我们就必须要知道对于每一个高度heights[i]&#xff0c;他所能勾勒出的矩形最大是多少&#xff08;即宽度最大是多少&#xff09;。 而对应到图上我们可以知道&#xff0c;要知…...

Banana Pi推出基于龙芯2K1000LA处理器的信创工业控制开发平台

Banana Pi推出基于龙芯2K1000LA处理器的信创工业控制开发平台&#xff1a;BPI-5202信创工业控制开发平台 BPI-5202 龙芯2K1000LA 信创工业控制开发平台 1.1 工控机的应用场景 物联网的狂潮&#xff0c;既是一场众多的计算机软硬件厂家&#xff08;也包括通讯方案和产品厂家&…...

springCloud整合Zookeeper的时候调用找不到服务

SpringCloud整合Zookeeper的时候调用找不到服务 首先&#xff0c;我们在注册中心注册了这个服务&#xff1a; 然后我们使用RestTemplate 调用的时候发现失败了&#xff1a;找不到这个服务&#xff1a; 找了很多资料发现这个必须要加上负载才行 BeanLoadBalanced //负载publi…...

【kubernetes】使用kubepshere部署中间件服务

KubeSphere部署中间件服务 入门使用KubeSphere部署单机版MySQL、Redis、RabbitMQ 记录一下搭建过程 (内容学习于尚硅谷云原生课程) 环境准备 VMware虚拟机k8s集群&#xff0c;一主两从&#xff0c;master也作为工作节点&#xff1b;KubeSphere k8skubesphere devops比较占用磁…...

如何从tabbar页面传数据

无论是百度小程序还是微信小程序&#xff0c;app.json中规定的tabbar页面是不支持传参的&#xff0c;例如&#xff1a; <navigator url../service/service?typeid6 openType"switchTab"> 服务项目 </navigator> 上面的navigater跳转有个属性&#…...

软考高级系统架构设计师系列论文七十四:基于构件的软件开发

软考高级系统架构设计师系列论文七十四:基于构件的软件开发 一、构件相关知识点二、摘要三、正文四、总结一、构件相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构...

图为科技_边缘计算在智能安防领域的作用

边缘计算在智能安防领域发挥着重要的作用。智能安防系统通常需要处理大量的图像、视频和传感器数据&#xff0c;并对其进行实时分析和处理。边缘计算可以将计算和数据处理功能移动到离数据源更接近的地方&#xff0c;例如摄像头、传感器设备或安防终端。 以下是边缘计算在智能…...

Android 13 - Media框架(7)- NuPlayer::Source

Source 在播放器中起着拉流&#xff08;Streaming&#xff09;和解复用&#xff08;demux&#xff09;的作用&#xff0c;Source 设计的好坏直接影响到播放器的基础功能&#xff0c;我们这一节将会了解 NuPlayer 中的通用 Source&#xff08;GenericSource&#xff09;关注本地…...

MySql015——使用子查询

一、创建customers表 ######################## # Create customers table ######################## use study;CREATE TABLE customers (cust_id int NOT NULL AUTO_INCREMENT,cust_name char(50) NOT NULL ,cust_address char(50) NULL ,cust_city char…...

leetcode 355 设计推特

用链表存储用户发送的每一个推特&#xff0c;用堆获取最先的10条动态 class Twitter {Map<Integer,Set<Integer>> followMap;//规定最新的放到最后Map<Integer,Tweet> postMap;//优先队列(堆&#xff09;PriorityQueue<Tweet> priorityQueue;int time…...

倒数 2 周|期待 2023 Google开发者大会

9 月 6-7 日&#xff0c;中国上海 前沿科技&#xff0c;新知同享 趣味体验&#xff0c;灵感齐聚 技术生态&#xff0c;多元共进 关注官网最新信息&#xff0c;敬请期待大会开幕 2023 Google 开发者大会官网 相信你一定记得&#xff0c;在今年 5 月的 Google I/O 大会上&am…...

代码随想录day57

516最长回文子序列 class Solution { public:int longestPalindromeSubseq(string s) {vector<vector<int>>dp(s.size(),vector<int>(s.size(),0));for(int i0;i<s.size();i)dp[i][i]1;for(int is.size()-1;i>0;i--){for(int ji1;j<s.size();j){if…...

YOLOv5、v8改进:CrissCrossAttention注意力机制

目录 1.简介 2. yolov5添加方法&#xff1a; 2.1common.py构建CrissCrossAttention模块 2.2yolo.py中注册 CrissCrossAttention模块 2.3修改yaml文件。 1.简介 这是ICCV2019的用于语义分割的论文&#xff0c;可以说和CVPR2019的DANet遥相呼应。 和DANet一样&#xff0c;…...

RabbitMQ特性介绍和使用案例

❤ 作者主页&#xff1a;李奕赫揍小邰的博客 ❀ 个人介绍&#xff1a;大家好&#xff0c;我是李奕赫&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 记得点赞、收藏、评论⭐️⭐️⭐️ &#x1f4e3; 认真学习!!!&#x1f389;&#x1f389; 文章目录 RabbitMQ特性…...

Ansible 使用 RHEL 系统角色

安装 RHEL 系统角色软件包&#xff0c;并创建符合以下条件的 playbook /home/greg/ansible/timesync.yml 在所有受管节点上运行 使用 timesync 角色 配置该角色&#xff0c;以使用当前有效的 NTP 提供商 配置该角色&#xff0c;以使用时间服务器 172.25.254.254 配置该角色&am…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...