Vue真假分页

功能需求：

        一共100条数据，我要分10页显示，每页显示10条

        一共100条数据，我要分5页显示，每页显示20条

        一共99条数据，我要分5页显示，每页显示20条

思路：

       理论上这三个参数，获取任意两个，便可知道第三个，但由于镇假分页的概念，所以在真分页中只能选择：pagenum，和pageSize，不然则是假分页啦，既然都可以，选共，这是为什么无论是真假分页最关键的两个参数：页码和每页显示多少条数据。既然是假分页：我就是要一次性拿到所有数据，然后再 分页取出。

        真假分页的本质区别只是数据存放位置不同，当然数据存放位置不同也就导致对数据库进行访问的次数不同！

 Vue假逻辑：

        1、查出所有的数据放到listdata集合中

        2、将前10条记录放入dataALL集合中默认加入分页

        3、onChange（Page）方法用来再选择page的时候显示数据

代码：

    <Table border :columns="columns7" :data="dataAll" ></Table>
    <Page :total="page.totalCount" :page-size="page.pagesize" show-sizer   style="padding-top:20px" @on-change="onChange"></Page>

 columns7: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "徽章名称",
          key: "name"
        },
        {
          title: "徽章介绍",
          key: "description"
        },
        {
          title: "勋章类型",
          key: "metaltype"
        },
        {
          title: "级别徽章图片",
          key: "imageUrl",
          columns: {
              'width':'50px'
          },
            render: (h, params) => {
              return h('div', [
                  h('img', {
                      attrs: {
                          src: params.row.imageUrl
                      },
                      style: {
                          width: '40px',
                          height: '40px'
                      }
                  }),
              ]);
          }
        },
        {
          title: "创建人",
          key: "creator"
        },
        {
          title: "操作人",
          key: "operator"
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.EditModel(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.openDeleteDialog(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

  dataAll: [],//存放table中显示的数据，也就是某页的数据放在这里
      listdata:[],//存放查出的所有数据
      page:{
         //分页数
         //arrPageSize:[10,20,30,40],
         //分页大小
         pagesize:10,
         //总分页数
         pageCount:1,
         //当前页面
        //  pageCurrent:1,
         //总数
        // totalCount:20
                    },

//查询全部model记录并显示
    showall(){
        var vm = this;
        var apiUrl = 'http://192.***.**.***/kernel-web/medal/findAll';
        axios.get(apiUrl)
        .then(function (response) {
              var totoalNum=0;
              for(var i=0;i<response.data.length;i++){
                var object=eval(response.data[i]);
                object.index=i+1;
                totoalNum++;
                vm.listdata.push(object);//查出所有的数据放 到listdata集合中
                if(i<vm.page.pagesize){
                  vm.dataAll.push(object);//初始化获取数据的过程中，将前10个默认加入分页
                }
              }
              vm.page.totalCount=totoalNum;
            })
            .catch(function (error) {
              alert(error);
            });       
    },

    onChange:function(page){
            // this.dataAll.splice(0,this.dataAll.length);
            for(var i = 10*(page - 1) + 1;//i用来确定从LIstdata中哪条记录开始取 取值为：1、11
              i<= ((this.page.totalCount>10*page)?(10*page):(this.page.totalCount));i++){
                  //判断当前选页是否<总条数，如果符合条件则i<=当前页范围内记录，如果不符合，则说明是最后一页，显示剩余记录即可
                  //主要是为了确定范围
                  // console.log(" i = " + i + "，item：" + JSON.stringify(this.dataAll[i]));
                  this.dataAll.push(this.listdata[i-1]);//把所确定范围内的记录放到dataAll中显示
              }
    },

小结：

      重点看下其中的小算法：如何确定i值的范围！，在这里是对list集合进行操作，真分页中也是如此，只不过是对数据库中表所有记录进行操作（limit相关），mybatis中的pageHelper也是假分页，内部原理与上面相通！