欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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分頁組件時選擇頁面大小時和點擊分頁時,無法動態(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最佳實踐(五招助你成為vuejs大師)

    Vue.js最佳實踐(五招助你成為vuejs大師)

    這篇文章主要介紹了Vue.js最佳實踐,本文主要面向?qū)ο笫怯幸欢╲ue.js 編輯經(jīng)驗的開發(fā)者,需要的朋友可以參考下
    2018-05-05
  • vue-treeselect顯示unknown的問題及解決

    vue-treeselect顯示unknown的問題及解決

    這篇文章主要介紹了vue-treeselect顯示unknown的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 第一次接觸神奇的前端框架vue.js

    第一次接觸神奇的前端框架vue.js

    第一次接觸神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感興趣的小伙伴們可以一起學(xué)習(xí)一下
    2016-12-12
  • proxy代理不生效以及vue?config.js不生效解決方法

    proxy代理不生效以及vue?config.js不生效解決方法

    在開發(fā)Vue項目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實際運行過程中發(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問題

    今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實例

    vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實例

    今天小編就為大家分享一篇vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解Vue3如何加載動態(tài)菜單

    詳解Vue3如何加載動態(tài)菜單

    這篇文章主要為大家詳細(xì)介紹了Vue3是如何實現(xiàn)加載動態(tài)菜單功能的,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定幫助,需要的可以參考一下
    2022-07-07
  • Vue3用Proxy替代defineProperty的原因

    Vue3用Proxy替代defineProperty的原因

    vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • vue實現(xiàn)簡單圖片上傳

    vue實現(xiàn)簡單圖片上傳

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • Vue常用的修飾符及應(yīng)用場景解讀

    Vue常用的修飾符及應(yīng)用場景解讀

    這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評論