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