Element的Pagination分頁sync問題小結
更新時間：2022年07月28日 10:53:08 作者：愛學習的大魚
本文主要介紹了Element的Pagination分頁sync問題小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
今天用到Element-UI的Pagination分頁組件時選擇頁面大小時和點擊分頁時，無法動態(tài)刷新頁面數據,數據如下：
<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，優(yōu)化如下:
<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多層的問題
最終優(yōu)化方案：
<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
}
}優(yōu)化結果:
到此這篇關于Element的Pagination分頁sync問題小結的文章就介紹到這了,更多相關Element Pagination分頁sync內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue.js最佳實踐,本文主要面向對象是有一定vue.js 編輯經驗的開發(fā)者，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue-treeselect顯示unknown的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
第一次接觸神奇的vue.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感興趣的小伙伴們可以一起學習一下2016-12-12
proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項目過程中,使用了Proxy代理進行數據劫持,但是在實際運行過程中發(fā)現代理并沒有生效,也就是說數據并沒有被劫持,這篇文章主要給大家介紹了關于proxy代理不生效以及vue?config.js不生效解決方法的相關資料,需要的朋友可以參考下2023-11-11
解決Vue+Element ui開發(fā)中碰到的IE問題
今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue新vue-cli3環(huán)境配置和模擬json數據的實例
今天小編就為大家分享一篇vue新vue-cli3環(huán)境配置和模擬json數據的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue3是如何實現加載動態(tài)菜單功能的，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-07-07
vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細介紹了vue實現簡單圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了Vue常用的修飾符及應用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10