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

小灰灰 2022-03-06 11:10 348阅读 0赞

# 背景 #

订单系统前端使用vue框架，基于iview组件。当显示到表格的数据过多时，会进行分页处理。当然，分页有真分页和假分页，本次我们采用的是假分页。

# 方法介绍 #

##  1.整体介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

##  2.基本表格分页 ##

###  2.1 查询按钮绑定方法 ###

###  2.2 绑定表格数据 ###

###  2.3 添加分页控件 ###

###  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.最终效果 ##

![在这里插入图片描述][20190318195648260.png]

# 总结 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220303/1506168511144bae8ed3dae84db194c1.png
[20190318195648260.png]: /images/20220303/f181ac8b6cff416d9e8759e07a0f16ca.png