Element的Pagination分頁sync問題小結
今天用到Element-UI的Pagination分頁組件時選擇頁面大小時和點擊分頁時,無法動態刷新頁面數據,數據如下:
<div class="pagination"> <el-pagination background :page-size="pageSize" :current-page="currentPage" :page-sizes='[5, 10, 20, 40]' :total="tableData.length" layout="total,sizes,prev,pager,next,jumper" ></el-pagination> </div>
錯誤如下:
按官方所說,加.sync,優化如下:
<div class="pagination"> <el-pagination background :page-size.sync="pageSize" :current-page.sync="currentPage" :page-sizes='[5, 10, 20, 40]' :total="tableData.length" layout="total,sizes,prev,pager,next,jumper" ></el-pagination> </div>
還是存在問題,當前頁面能改變,但頁面大小不變,如下所示:
問題解析 ===> Element-ui el-pagination封裝之sync多層的問題
最終優化方案:
<div class="pagination"> <el-pagination background :page-size="pageSize" :current-page="currentPage" :page-sizes='[5, 10, 20, 40]' :total="tableData.length" layout="total,sizes,prev,pager,next,jumper" @size-change="handlePageSizeChange" @current-change="handlePageChange" ></el-pagination> </div>
methods: { handlePageChange(val) { this.currentPage = val }, handlePageSizeChange(val) { this.pageSize =val } }
優化結果:
到此這篇關於Element的Pagination分頁sync問題小結的文章就介紹到這瞭,更多相關Element Pagination分頁sync內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue使用elementUI分頁如何實現切換頁面時返回頁面頂部
- js如何使用Pagination+PageHelper實現分頁
- Vue使用v-model封裝el-pagination組件的全過程
- Vue組件庫ElementUI實現表格列表分頁效果
- vue項目實現分頁效果