element UI - Pagination 分页

 <!-- 分页 -->
      <div class="pagination" style="float:right; padding-right:200px">
        <el-pagination
          @size-change="handleHistorySizeChange"
          @current-change="handleHistoryCurrentChange"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>

handleHistoryCurrentChange(val) {
      this.pagination.currentPage = val;
      this.handleTdHistoryList();
    },
    handleHistorySizeChange(val) {
      this.pagination.pageSize = val;
      this.handleTdHistoryList();
    }

 

<el-pagination></el-pagination>组件：点击组件页码等，把页码、当前显示页数传入，然后通过handleHistoryCurrentChang、handleHistorySizeChange函数，把传入的值val 存到 currentPage与pageSize中，最后组件通过:

page-size="pagination.pageSize"  :current-page="pagination.currentPage" 成功绑定

最后使用参数currentPage与pageSize，调用刷新函数，刷新页面