工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办

news2024/11/16 17:32:42

文章目录

- 一、如何使用elementUI+vue实现前端分页
- 二、通用的前端分页代码

有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。

一、如何使用elementUI+vue实现前端分页

假如你用vue来实现，思路就是将数据切割，然后分批显示。

所以可以使用 computed 计算属性和 v-for 指令来实现前端分页。

因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。

如果我需要结合elementUI的分页组件，怎么实现呢？以下是实现方式，做得跟后端给的分页一样的效果。

<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="paginatedData" border style="width: 100%">
	<el-table-column type="index" label="序号" :index="indexMethod" width="60" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="customerName" label="客户名称" min-width="130"> </el-table-column>
        <el-table-column prop="chainName" label="业务名称" min-width="120"> </el-table-column>
        <el-table-column prop="statisticsPeriod" label="统计周期" min-width="80"> </el-table-column>
        <el-table-column prop="dateCycle" label="时间周期" min-width="150"> </el-table-column>
</el-table>     
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"> </el-pagination>
</div>
<script>
export default {
  data() {
    return {
      list: [] //后端接口给的列表数据（未分页，全部返回）
    }
  },
  created() {
    //请求后端数据
    this.getList();
  },
  computed: {
    // 使用前端实现分页的计算数据
    paginatedData() {
      // 分页的起始下标
      const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
      // 分页的末尾下标
      const endIndex = startIndex + this.listQuery.pageNum;
      // 返回切割后的数据
      return this.list.slice(startIndex, endIndex);
    },
    // 总条数
    totalNum() {
      return this.list.length;
    },
    // 总分页数
    total() {
      return Math.ceil(this.list.length / this.listQuery.pageNum);
    }
  },
  methods:{
   //数据
   getList() {
      //调用后端接口
      staticsList().then((res) => {
        this.list = res.data;
      });
    },
    // 每页列表数
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
    },
    // 当前分页数（第几页）
    handleCurrentChange(val) {
      this.listQuery.page = val;
    },
  }
}    
</script>

这样就可以实现前端分页了。

二、通用的前端分页代码

如果你的项目中，不是用elementUI框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。

以下是一个示例代码：

<template>
  <div>
    <ul v-for="item in paginatedData" :key="item.id">
      <!-- 显示需要显示的数据 -->
        <li>{{item.name}}</li>
    </ul>
    <div>
      <!-- 显示分页控件 -->
      <button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber">
        {{ pageNumber }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 假如这里就是你通过接口获取到的所有的数据（未分页）
      itemsPerPage: 10, // 每页显示的数据量
      currentPage: 1 // 当前页码
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  }
};
</script>