快捷導(dǎo)航

Element的Pagination分頁sync問題小結(jié)

更新時(shí)間：2022年07月28日 10:53:08 作者：愛學(xué)習(xí)的大魚

本文主要介紹了Element的Pagination分頁sync問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天用到Element-UI的Pagination分頁組件時(shí)選擇頁面大小時(shí)和點(diǎn)擊分頁時(shí)，無法動(dòng)態(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>

錯(cuò)誤如下：

按官方所說，加.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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中使用require.context引入組件
本文主要介紹了vue項(xiàng)目中使用require.context引入組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
詳解vue 實(shí)例方法和數(shù)據(jù)
這篇文章主要介紹了vue 實(shí)例方法和數(shù)據(jù)的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-10-10
Vue?Router動(dòng)態(tài)路由實(shí)現(xiàn)實(shí)現(xiàn)更靈活的頁面交互
Vue?Router是Vue.js官方的路由管理器,用于構(gòu)建SPA（單頁應(yīng)用程序）,本文將深入探討Vue?Router的動(dòng)態(tài)路由功能,希望可以幫助大家更好地理解和應(yīng)用Vue.js框架
2024-02-02
Vue.js -- 過濾器使用總結(jié)
本篇文章主要介紹了Vue.js -- 過濾器使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
深入理解vue路由的使用
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。
2017-03-03
基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)，詳細(xì)介紹了使用vue編寫的日期組件,，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03
vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問題及解決
這篇文章主要介紹了vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式
近期在學(xué)習(xí)Vue時(shí)用elementUI時(shí)發(fā)現(xiàn)圖標(biāo)在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式,需要的朋友可以參考下
2022-09-09
vue輕松實(shí)現(xiàn)水印效果
這篇文章主要為大家詳細(xì)介紹了vue輕松實(shí)現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09