常用的分页

1、上图片效果

2、上代码

HTML

    <el-pagination
      class="pagination-right"
      @current-change="handleCurrentChange"
      :page-size="page_size"
      layout="total, prev, pager, next"
      :total="total_count"
      :current-page.sync="current_page"
    >
    </el-pagination>

data中数据定义

 // 分页数据,数据总数
 total_count: 0,
 // 分页数据,每页显示多少条数据
 page_size: 5,
 // 分页数据,当前多少页
 current_page: 1,

JS

  async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let data = {
        page: val,
        size: 5,
      };
      let result = await request.post("/user_getUserList", data);
      let { code, str, metadata } = result;
      if (code == 200) {
        this.total_count = metadata.total_count;
        this.current_page = metadata.current_page;
        this.page_size = metadata.page_size;
        this.postList = this.transformData(str);
      }
    },

3、注意

        在分页查询时我们切换查询条件，分页的页数还停留在上一次查看的页数（如第二页），而不是从第一页开始。（当数据多于两页数据的时候，会显示第二页的数据，但是当数据少于两页数据时，就会显示暂时无数据，其实数据是拿回来的，只是这时候分页器接收到的页码是2，而没有那么多数据显示，就会显示暂无数据）

解决办法：

        在el-pagination属性中需要加上:current-page.sync="currentPage"并重新设置当前页码this.currentPage=1