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是我獲取到后臺數據的數組。

以上這篇利用vue和element-ui設置表格內容分頁的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。