当前位置: 代码迷 >> 综合 >> element UI - Pagination 分页
  详细解决方案

element UI - Pagination 分页

热度:49   发布时间:2024-02-09 14:59:33.0

 <!-- 分页 --><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,调用刷新函数,刷新页面

  相关解决方案