利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例

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

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;
 }
}

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

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