Vue+iview---分页功能的实现

背景

  订单系统前端使用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.最终效果

总结

  所有走过的路都是最美的风景，好好总结吧！