前端分頁(yè) 便于方便 如果數(shù)據(jù)量大還是老老實(shí)實(shí)后端調(diào)接口吧
直接傳代碼 干貨
先在表格下面定義1個(gè)頁(yè)碼按鈕
<el-row :span="24">
<div class="pagination-list">
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="paginations.page_index"
:page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total">
</el-pagination>
</div>
</el-row>
然后data 定義數(shù)據(jù)
allItems: [],
paginations: {
page_index: 1,
total: 0,
page_size: 5, //一頁(yè)顯示幾條
layout: "prev, pager, next"
}
methods 定義方法
setPaginations() {
this.paginations.total = this.allItems.length;
this.paginations.page_index = 1;
this.paginations.page_size = 5;
this.items = this.allItems.filter((tableitems, index) => {
return index < this.paginations.page_size
});
},
/**
* 點(diǎn)擊頁(yè)碼跳轉(zhuǎn)
*/
handleCurrentChange(page) {
let index = this.paginations.page_size * (page - 1);
let items_num = this.paginations.page_size * page;
let tables = []
for (let i = index; i < items_num; i++) {
if (this.allItems[i]) {
tables.push(this.allItems[i]);
}
this.items = tables;
}
},
allitems是用來(lái)存放數(shù)據(jù)的 記得把你的接口數(shù)據(jù)保存到那里面去 或者你自己修改一下代碼也可以