Vue + ElementUI实现分页功能

首先查找elementUI的组件，页面显示分页

<div class="block">
      <el-pagination @size-change="handleSizeChange" @current-
           change="handleCurrentChange" :current-page=paginations.page_index
           :page-sizes="[5, 10, 15, 20]" :page-size=paginations.page_size layout="total, 
           sizes, prev, pager, next, jumper"
           :total=paginations.total>
      </el-pagination>
</div>

绑定分页数据

 data() {
      return {
        paginations: {
          page_index: 1, // 当前位于哪页
          total: 0, // 总数
          page_size: 5, // 1页显示多少条
          // page_sizes: [5, 10, 15, 20], //每页显示多少条
          // layout: 'total, sizes, prev, pager, next, jumper' // 翻页属性
        },
      }
    }
mothods:{
      handleSizeChange(val) {   //每页显示的数量 
        this.paginations.page_size = val  //这里一定记得绑定数据
        console.log(`每页 ${val} 条`);
        this.onSearch();
      },
      handleCurrentChange(val) {  //当前是哪一页
        this.paginations.page_index = val;
        console.log(`当前页: ${val}`);
        this.onSearch();
      }
}

在调后台的接口的时候 我们只需要传入当前页和每页数量即可，后台返回totalCount，赋值给this.paginations.total.