溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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)" >
其中searchInfo是我獲取到后臺數據的數組。
以上這篇利用vue和element-ui設置表格內容分頁的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
