html代碼

為連平等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及連平網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都做網(wǎng)站、連平網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

layout代表組件布局，子組件名用逗號分隔

屬性： total代表總條目數(shù)

事件： current-change用于監(jiān)聽頁數(shù)改變，而內(nèi)容也發(fā)生改變

其他屬性可參見element官方API

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

監(jiān)聽方法,寫在methods中

methods:{
 created:function(){
  //加載班級的數(shù)據(jù)
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后臺獲取數(shù)據(jù)
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//設(shè)置數(shù)據(jù)總數(shù)目?。。?   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

其中url是在后臺express搭建起來的腳手架所設(shè)置好的路由。

在data中注冊使用的數(shù)據(jù)

因為我是全局注冊，data是個返回對象的函數(shù)

data:function(){
   return {
    total:0,//默認數(shù)據(jù)總數(shù)
    pagesize:7,//每頁的數(shù)據(jù)條數(shù)
    currentPage:1,//默認開始頁面
   }
  }

將數(shù)據(jù)綁定到tbody上

其中searchInfo是我獲取到后臺數(shù)據(jù)的數(shù)組。

以上這篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。