vue+element-ui table 实现表格分页

分页html代码：

<p style="text-align:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, next, jumper"
        :total="totalCount"
      ></el-pagination>
</p>
           

element-ui官网上有写有关分页的两个事件size-change和current-change

想要表格和分页结合，动态展现分页效果，可通过以下代码实现

// 每页显示数据变更
 handleSizeChange(val) {
    // console.log("每页" + val + "条");
    //this.pageSize 是请求表格数据接口中的参数 设置表格每页显示多少条数据
    this.pageSize = val; 
    this.loadTableData(); //调表格数据的接口
 },
 // 页码变更
 handleCurrentChange(val) {
   // console.log("当前页" + val);
   //this.currentPage 是请求表格数据接口中的参数 设置表格当前处于多少页
   this.currentPage = val;
   this.loadTableData();
 },