下面我就為大家分享一篇利用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是我取得到背景資料的陣列。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是利用vue和element-ui如何實現表格內容分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！
