前端分页 便于方便 如果数据量大还是老老实实后端调接口吧
直接传代码 干货
先在表格下面定义1个页码按钮
<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 定义数据
allItems: [],
paginations: {
page_index: 1,
total: 0,
page_size: 5, //一页显示几条
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
});
},
/**
* 点击页码跳转
*/
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是用来存放数据的 记得把你的接口数据保存到那里面去 或者你自己修改一下代码也可以