html代碼
因為我寫在template中，也就是新建了組建中，貼出代碼。
<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination>
代碼中，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,//默認(rèn)數(shù)據(jù)總數(shù)
pagesize:7,//每頁的數(shù)據(jù)條數(shù)
currentPage:1,//默認(rèn)開始頁面
}
}將數(shù)據(jù)綁定到tbody上
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
其中searchInfo是我獲取到后臺數(shù)據(jù)的數(shù)組。
以上這篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
