快捷導(dǎo)航

vue+Element實現(xiàn)分頁效果

更新時間：2021年09月27日 09:07:25 作者：Hgiao

這篇文章主要為大家詳細(xì)介紹了vue+Element實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+Element實現(xiàn)分頁效果的具體代碼，供大家參考，具體內(nèi)容如下

一般樣式都是card里面包含列表和分頁

這里就直接上代碼了

<el-card>
  <!-- 用戶列表區(qū)域 -->
  <el-table :data="rightsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe>
    <el-table-column  label="#" type="index"></el-table-column>
    <el-table-column label="權(quán)限名稱" prop="authName"></el-table-column>
  </el-table>

  <!--分頁區(qū)域-->
  <el-pagination
      @size-change="size_change" //pageSize 改變時會觸發(fā)
      @current-change="current_change"  //currentPage 改變時會觸發(fā)
      :current-page="currentPage"  //當(dāng)前頁數(shù)
      :page-sizes="[10,20,30]"   //每頁顯示個數(shù)選擇器的選項設(shè)置
      :page-size="pagesize"  //每頁顯示條目個數(shù)
      layout="total, sizes, prev, pager, next, jumper"  //組件布局
      :total="rightsList.length   //總條目數(shù)
      "> 
  </el-pagination>
</el-card>

然后定義一下數(shù)據(jù)

data() {
   return {
        rightsList:[], //列表數(shù)據(jù)
        
        total:0,//總條目數(shù)
        pagesize:10,//每頁顯示條目個數(shù)
        currentPage:1,//當(dāng)前頁數(shù)
    }
},

監(jiān)聽改變事件

methods:{
   //監(jiān)聽 pagesize 改變的事件
   size_change(newSize){
       this.pagesize = newSize
   }
   //監(jiān)聽 頁碼值 改變的事件
   current_change(newPage){
       this.currentPage = newPage
   },
   
}

效果如圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue常見路由跳轉(zhuǎn)的幾種方式小結(jié)
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價值，感興趣的可以了解一下
2023-09-09
運行npm?run?dev報錯的原因及解決
剛剛創(chuàng)建好vue項目的時候,運行 npm run dev 會報錯,下面這篇文章主要給大家介紹了關(guān)于運行npm?run?dev報錯的原因及解決方法,需要的朋友可以參考下
2022-10-10
vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue + iView實現(xiàn)Excel上傳功能的完整代碼
前一段時間項目經(jīng)歷了前端上傳文件的過程，首先進(jìn)入頁面會展示默認(rèn)的樣子，選中要上傳的excel文件，本文通過實例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
elementui彈窗頁按鈕重復(fù)提交問題解決方法
本文主要介紹了elementui彈窗頁按鈕重復(fù)提交問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue構(gòu)建單頁面應(yīng)用實戰(zhàn)
本篇文章主要介紹了vue構(gòu)建單頁面應(yīng)用實戰(zhàn)，使用 SPA，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗。
2017-04-04
Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
Vue父子傳遞實例講解
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。
2020-02-02
vue實現(xiàn)多個數(shù)組合并
這篇文章主要介紹了vue實現(xiàn)多個數(shù)組合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06