element 数据分页，后端什么也不管的分页

痛定思痛。 2021-09-02 05:52 441阅读 0赞

element el-pagination 数据分页

提示： 后端将数据全部返回给你，具体怎么分页，自己操作

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件分析

  1. <el-pagination
  2.         :page-size="2" // 自己定义的每页几条数据
  3.         layout="prev, pager, next, jumper" // 一些参数
  4.         @current-change="handleCurrentChange" // 当前点击的页码
  5.         :total="total" // 总条数，也就是请求回数据的length
  6.         ></el-pagination>

在这里插入图片描述

二、分页基本思路

1. 根据slice切割，计算出分页规律

2. 将切割后数据，赋值到新的数据

  1. handleCurrentChange (nowNum) { 
  2.       console.log('当前页', nowNum)
  3.       console.log(2 * (nowNum - 1))
  4.       console.log('分页数据', this.ListCount)
  5.       this.recodeList = this.ListCount.slice(2 * (nowNum - 1), 2 * nowNum)
  6.     },

3. 表格展示的数据，是切割之后的数据

在这里插入图片描述

4. slice 是半闭半开截取[ ), 数据中数组索引是以0开始，所以第一次是 [ 0, 2) 实际取得是数组的0， 1条数据。 第二次是[2, 4) 实际取得是数组的2，3 以此类推… 如果每页想展示10条数据，只需要设置:page-size="10" this.recodeList = this.ListCount.slice(10 * (nowNum - 1), 10 * nowNum)

总结

  1. slice进行数据的剪切
  2. 将剪切出的数据，重新赋值

补充：

如果后端给了pageNo,第几页。那么更方便了

  1. handleCurrentChange(nowNum) {
  2.       this.params.pageNo = nowNum;
  3.       this.getCheck();
  4.     },

通过点击事件，将现在nowNum点击的数字，传入。来改变参数的传入。再重新调用方法求解

发表评论

表情：
评论列表 （有 0 条评论，441人围观）

还没有评论，来说两句吧...

相关阅读