Element的Pagination分頁sync問題小結(jié)
今天用到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-05proxy代理不生效以及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-09vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09