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

element el-pagination 数据分页

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

前言

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

一、组件分析

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

二、分页基本思路

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

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

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

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,第几页。那么更方便了

 handleCurrentChange(nowNum) {
      this.params.pageNo = nowNum;
      this.getCheck();
    },

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