利用vue和element-ui如何實現表格內容分頁

下面我就為大家分享一篇利用vue和element-ui設定表格內容分頁的實例，具有很好的參考價值，希望對大家有幫助。

html程式碼

因為我寫在template中，也就是新建了組成中，貼出程式碼。

<el-pagination 
 small
 layout="prev, pager, next"
 :total="total" 
 @current-change="current_change">
</el-pagination>

程式碼中，small代表是否使用小型分頁樣式

layout代表元件佈局，子元件名稱以逗號分隔

屬性： total代表總條目數

事件： current-change用於監聽頁數改變，而內容也發生改變

其他屬性可參考element官方API

http://element.eleme.io/# /zh-CN/component/pagination

監聽方法,寫在methods中

methods:{
 created:function(){
  //加载班级的数据
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后台获取数据
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//设置数据总数目！！！
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

其中url是在後台express搭建起來的鷹架所設定好的路由。

在data中註冊使用的資料

因為我是全域註冊，data是個回傳物件的函數

data:function(){
   return {
    total:0,//默认数据总数
    pagesize:7,//每页的数据条数
    currentPage:1,//默认开始页面
   }
  }

將資料綁定到tbody上

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">

其中searchInfo是我取得到背景資料的陣列。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

有關處理axios攔截設定和錯誤處理的方法？

透過vue.js使用axios實作下載功能（詳細教學）

完美解決axios在ie下的相容性問題，具體解決步驟如下

以上是利用vue和element-ui如何實現表格內容分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！