前端模拟分页实现方案

背景

在某些场景下，我们需要处理这样的情况：

• 需要循环调用后端接口获取数据
• 返回的数据需要前端处理后才能展示
• 需要对处理后的数据进行分页展示

实现思路

1. 先循环调用接口获取所有原始数据
2. 对数据进行处理转换，得到最终的数据数组
3. 在前端实现分页逻辑，按需展示数据

代码实现

模板部分

<template>
  <div>
    <!-- 列表渲染 -->
    <div v-for="item in showUserList" :key="item.id">
      <!-- 列表内容 -->
    </div>
    
    <!-- 分页组件 -->
    <el-pagination
      @current-change="changePagination"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
    />
  </div>
</template>

数据结构

data() {
  return {
    // 分页配置
    tablePage: {
      pageSize: 8,      // 每页显示条数
      currentPage: 1,   // 当前页码
      maxPage: 1        // 最大页码数
    },
    tableData: [],      // 总数据数组
    showUserList: [],   // 当前页显示的数据
    page_over: false    // 是否到达最后一页
  }
}

分页逻辑

methods: {
  changePagination() {
    // 判断是否超出最大页码
    if (this.tablePage.currentPage > this.tablePage.maxPage) {
      this.page_over = true
      console.log('已经是最后一页了')
      return
    }

    // 计算当前页数据
    if (this.tablePage.currentPage === 1) {
      // 处理第一页数据
      if (this.tableData.length <= this.tablePage.pageSize) {
        // 总数据不足一页
        this.showUserList = this.tableData.slice(0, this.tableData.length)
      } else {
        // 展示第一页数据
        this.showUserList = this.tableData.slice(0, this.tablePage.pageSize)
      }
    } else {
      // 处理其他页数据
      const startIndex = (this.tablePage.currentPage - 1) * this.tablePage.pageSize
      const endIndex = this.tablePage.currentPage * this.tablePage.pageSize
      this.showUserList = this.tableData.slice(startIndex, endIndex)
    }

    // 更新页码
    this.tablePage.currentPage++
  }
}

使用场景

这种前端分页方案适用于以下场景：

• 数据总量较小的情况
• 需要对后端数据进行处理后再展示
• 对实时性要求不高的数据展示

如果数据量较大，建议使用后端分页方案，避免一次性加载过多数据影响性能。