Vue+elementUI实现逻辑分页和物理分页

首先呢，分页分为两种方式，一种是逻辑分页，一种是物理分页。逻辑分页是指后端完成分页操作，而前端通过参数page(第几页)、rows(每页条数)去向数据库查询当前页的数据；物理分页是指前端从数据库把所有数据都取过来，然后在前端完成分页。所以两者相比较而言，物理分页占用的内存更高，但效率更快。当数据量不多时，物理分页可以满足功能要求，但当数据量很大时，则需要采用逻辑分页，然而我一开始使用的是物理分页，经过讨论分析，立马改为逻辑分页。逻辑分页和物理分页的主要区别就在于取数据这一块

首先是效果：

首先是elementUI部分，使用的是el-table，用来显示取到的数据

接着就是要分页啦：

上面两块逻辑分页和物理分页是一样的。

然后就是取数据、放数据：

逻辑分页：

getanchorRecordTable(n1,n2) {
        let self=this;
        n1 = self.anchorRecordcurrentPage;
        n2 = self.anchorRecordPageSize;
        const anchorRecorddata=new FormData();
        anchorRecorddata.append('page',n1);
        anchorRecorddata.append('rows',n2);
        this.axios.post("url",anchorRecorddata ).then(  (reponse) => {
            self.anchorRecordTable = [];
            // 将数据赋值给tableData
            for (var i = 0; i < reponse.data.rows.length; i++) {
              self.anchorRecordTable.push(reponse.data.rows[i]);
            }
            // 将数据的长度赋值给totalCount
            self.anchorRecordtotalCount = reponse.data.total;
          }
        );
      },

// 每页显示的条数
handleSizeChange(val) {
        // 改变每页显示的条数
        this.anchorRecordPageSize = val;
        // 点击每页显示的条数时，显示第一页
        this.getanchorRecordTable(val, 1);
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.anchorRecordcurrentPage = 1
      },

// 显示第几页
handleCurrentChange(val) {
        // 改变默认的页数
        this.anchorRecordcurrentPage = val;
        // 切换页码时，要获取每页显示的条数
        this.getanchorRecordTable(this.anchorRecordPageSize, (val) * (this.pageSize))
      },

物理分页：

getanchorRecordTable(){
            let self=this;
            this.axios.post("url").then(  (reponse) => {
            self.anchorRecordTable = [];
            // 将数据赋值给tableData
            for (var i = 0; i < reponse.data.length; i++) {
              self.anchorRecordTable.push(reponse.data[i]);
            }
            // 将数据的长度赋值给totalCount
            self.anchorRecordtotalCount = reponse.data.length;
          }
        );
      },

// 每页显示的条数
handleSizeChange(val) {
        // 改变每页显示的条数
        this.anchorRecordPageSize = val;
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.anchorRecordcurrentPage = 1
      },

// 显示第几页
handleCurrentChange(val) {
        // 改变默认的页数
        this.anchorRecordcurrentPage = val;
      },
     
   }