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

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

首先是效果：

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

<el-table
      ref="multipleTable"
      :data="anchorRecordTable"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="index"
        width="50%"
        :index="indexMethod"
        align="center">
      </el-table-column>
      <el-table-column
        prop="anchorId"
        label="锚点ID"
        width="90%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="anchorAlias"
        label="锚点别名"
        width="90%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="onlineTime"
        label="上线时间"
        width="200%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="offlineTime"
        label="下线时间"
        width="200%"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>

接着就是要分页啦：

<templete>
<div class="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="anchorRecordcurrentPage"
                     :page-sizes="pageSizes"
                     :page-size="anchorRecordPageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="anchorRecordtotalCount">
      </el-pagination> 
</div>
</templete>

<script>
data: function () {
      return {
        anchorRecordTable: [],
        anchorRecordcurrentPage: 1, // 默认显示第几页
        anchorRecordtotalCount: 1, // 总条数，根据接口获取数据长度(注意：这里不能为空)
        pageSizes: [2, 5, 10, 20],  // 个数选择器（可修改）
        anchorRecordPageSize: 5, // 默认每页显示的条数（可修改）
      }
    },

methods:{

handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
 
//翻页序号递增
indexMethod(index) {
        return (this.anchorRecordcurrentPage-1) * this.anchorRecordPageSize + (index + 1)

      }
}
</script>

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

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

逻辑分页：

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;
      },
     
   }