本文例項為大家分享了+Element實現分頁效果的具體程式碼，供大家參考，具體內容如下

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

這裡就直接上程式碼了

<el-card>
  <!-- 使用者列表區域 -->
  <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="許可權名稱" prop="authName"></el-table-column>
  </el-table>

  <!--分頁區域-->
  <el-pagination
      @size-change="size_change" //pageSize 改變時會觸發客棧
 

      @current-change="current_change"  //currentPage 改變時會觸發
      :current-page="currentPage"  //當前頁數
      :page-sizes="[10,20,30]"   //每頁顯示個數選擇器的選項設定
      :page-size="pagesize"  //每頁顯示條目個數
      layout="total,sizes,prev,pager,next,jumper"  //元件佈局
      :total="rightsList.length   //總條目數
      "> 
  </el-pagination>
</el-card>

然後定義一下資料

data() {
   return {
        rightsList:[],//列表資料
        
        total:0,//總條目數
        pagesize:10,//每頁顯示條目個數
        currentPage:1,//當前頁數
    }
},

監聽改變事件

methods:{
   //監聽 pagesize 改變的事http://www.cppcns.com件
   size_change(newSize){
       this.pagesize = newSize
   }
   //監聽 頁碼值 改變的事件
   current_change(newPage){
       this.currentPage = EPOYte
 
newPage
   },}

效果如圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。