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

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

# element el-pagination 数据分页 #

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

# 前言 #

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

# 一、组件分析 #

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

![在这里插入图片描述][20200912142055552.png_pic_center]

# 二、分页基本思路 #

## 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. 表格展示的数据，是切割之后的数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

## 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点击的数字，传入。来改变参数的传入。再重新调用方法求解

[20200912142055552.png_pic_center]: /images/20210813/4bfbeddefbf34a13a895ee529d84668f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/cd904c27c13140d6ad4cc292fd0af8d2.png