快速实现前端分页

1.添加分页

<!-- 分页-->
      <div class="block block_AAA">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="18"
          layout="prev, pager, next, jumper"
          :total="cat_all_data.length"
          :small="true"
          class="fenye"
        >
        </el-pagination>
        <button class="Go">GO</button>
      </div>

2.定义复制数据源

  <!--定义起始页-->
  currentPage3: 1,
  <!-- 定义复制数据源数组-->
 cat_all_data: [{

              }]

3.保存数据源

 _this.cat_all_data = [].concat(date.data);//保存一份完整数据
             _this.tableData = date.data.slice(0,18);

4.定义分页方法

handleSizeChange(val) {
          //console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          //console.log(`当前页: ${val}`);
          var start_key = 18*(val-1);
          this.tableData = this.cat_all_data.slice(start_key,(18+start_key));
        }

5.设定样式

.block_AAA {
    /deep/ .el-input__inner{
      /*height: 2.5rem !important;*/
    }
    /deep/ .el-pagination span:not([class*=suffix]){
      font-size: 1.42rem !important;
    }
  }
  .Go{
    display: inline-block;
    width:4.28rem;
    height:22px;
    border:1px solid rgba(78,132,255,1);
    border-radius:2px;
    font-size:1rem;
    color: #4E84FF;
    font-family:YaHei;
    /*line-height: 22px;*/
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 1.42rem;
    background-color: white;
  }