背景
订单系统前端使用vue框架，基于iview组件。当显示到表格的数据过多时，会进行分页处理。当然，分页有真分页和假分页，本次我们采用的是假分页。
方法介绍
1.整体介绍
2.基本表格分页
2.1 查询按钮绑定方法
<Button
type="primary"
style="margin-left:20px"
@click="add"
>查询</Button>
2.2 绑定表格数据
<Table
:columns="historyColumns"
:data="historyData"
></Table>
2.3 添加分页控件
<Page
:total="dataCount"
:page-size="pageSize"
show-total
@on-change="changepage"
show-elevator
></Page>
2.4 变量的声明（数据）
data: function() {
return {
ajaxHistoryData: [],
exportdata: [],
// 初始化信息总条数
dataCount: 0,
// 每页显示多少条
pageSize: 10,
historyColumns: [
{
title: "卡号",
key: "cardId"
},
{
title: "姓名",
key: "ownerName"
},
{
title: "订单编号",
key: "orderid"
},
{
title: "总金额",
key: "totalcost"
},
{
title: "订餐时间",
key: "orderTime"
}
],
historyData: []
};
},
2.5 add方法内容
分页显示方法的代码：
vm.ajaxHistoryData = response.data;
vm.exportdata = response.data;
vm.dataCount = response.data.length; //this.ajaxHistoryData.length;//vm.ajaxHistoryData;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if (vm.dataCount < vm.pageSize) {
vm.historyData = vm.ajaxHistoryData;
} else {
vm.historyData = vm.ajaxHistoryData.slice(0, vm.pageSize);
}
2.6 换页方法内容
changepage(index) {
var _start = (index - 1) * this.pageSize;
var _end = index * this.pageSize;
this.historyData = this.ajaxHistoryData.slice(_start, _end);
},
3.最终效果
总结
所有走过的路都是最美的风景，好好总结吧！