elementui分页功能（当后端将所有数据全部返回，由前端处理）

柔光的暖阳◎ 2022-12-30 10:51 107阅读 0赞

情景浮现：后端没有给分页，一股脑全把数据给前端，比如请求过来有1941条信息，那么我们就应该在页面显示有多少页数据，多少条。

**以下为个人写的方法，可能方法有点蠢，不影响功能的实现，如有错误或其他更优写法，欢迎各位小伙伴提出宝贵意见。**

<template>
    	<div>
    		<el-table 
            :data="sgData"
            style="width: 100%">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="code"
              label="基金代号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="suspenddate"
              label="暂停赎回日期">
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            background
            :page-size="everypageNum"
            layout="total,prev, pager, next"
            :total="zsTOTAL">
          </el-pagination>
    	</div>
    </template>

<script>
    export default { 
      data() { 
        return { 
          sgData:[], //表格中的数据
          resData: [], //请求返回的数据
          shData:[],
          zsTOTAL : 0, //总共有多少条数据
          pageVal :1, //默认显示第一页
          everypageNum :20,  //每一页显示多少条
        };
      },
      mounted() { 
        this.getztjjdata()
      },
      methods: { 
        getshjjdata(){ 
          this.$axios.post(
             '/apis',
             '/fund/suspend/purch',
             { key:'2e29ce045a839c918692223c92fe0fb9'}
            ).then(res=>{ 
              console.log("22",res.result)
              let data = res.result[0]
              let arr =[]
              for(var i in data){ 
                arr.push(data[i])
              }
              this.resData = arr  //这是得到的结果，数组中有1941条数据
              console.log(arr)
              let num = arr.length  //arr.length 为有多少条数据
              this.zsTOTAL = num
              this.sgData = arr.slice(this.pageVal-1,this.everypageNum) //当页面第一次加载进来，默认第一页数据
           })
        },
        handleCurrentChange(val) { 
          this.pageVal = val; //此处为用户点击第几页
          // 1: 0,19 当用户点击第一页，那么就是前20条，对耶下标位置应为0至19
          //后面截取的位置
          var that =this
          let start = that.everypageNum*val-20
          let end = that.everypageNum*val 
          if(that.resData.length<= that.everypageNum){   //这种情况为只有20条或者20条以下数据的情况
              that.sgData = that.resData
          }else{   //这种情况为大于20条数据
            if(that.everypageNum*val>=that.resData.length){ //用户点击的那一页是最后一页的数据，比如有49条数据，用户点击第3页，第二3就应该显示最后9条的数据
                that.sgData = that.resData.slice(start)
            }else{  //用户点击的那一页不是最后一页的数据，比如有49条数据，用户点击第二页，第二页就应该显示20至40条的数据
              that.sgData = that.resData.slice(start,end)
            }
          }
          
          //当有7个 that.resData
          //当有21个 that.resData.slice(0,20) that.resData.slice(20)
          //当有40， ...
          //当有47个 that.resData.slice(20,40) that.resData.slice(40)
          //以此类推找规律
        },
      }
    }
    </script>

下面是后台返回的数据图片，具体数据就不贴出来了  
![在这里插入图片描述][20201225100643841.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]  
最后效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]

[20201225100643841.png]: /images/20221120/f26cd717e3754082aceb2f841f498dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: /images/20221120/2eaf0b504126498d90844e0fd6d1914c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225102833330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关前端分页处理

页面中实现的分页效果，要么后端提供接口，每次点击下一页就调用接口，若不提供接口，分页得前端自己去截取。 ![3e1ca6558f0847d9a0da9685df40cc8b.

淩亂°似流年/ 2024年03月31日 17:16/ 0 赞/ 122 阅读

相关 JAVA---后端开发中实现分页功能

文章目录一、前言: 二、实现步骤：三、项目整体框架：四、实现过程五、整体效果：

梦里梦外;/ 2024年03月17日 13:25/ 0 赞/ 63 阅读

相关 DataTable实现纯前端分页(后端一次返回所有数据)

页面代码: <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <l

谁借莪１个温暖的怀抱￠/ 2023年06月22日 06:24/ 0 赞/ 26 阅读

相关 ElementUI 分页

一、概述当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。本次所使用

谁借莪１个温暖的怀抱￠/ 2023年01月11日 13:03/ 0 赞/ 228 阅读

相关 springboot + elementui 实现分页功能

目录后端前端后端 // num为当前页 size为每页个数 public Page<codesection> pageA

拼搏现实的明天。/ 2023年01月09日 01:08/ 0 赞/ 205 阅读

相关 elementui分页功能（当后端将所有数据全部返回，由前端处理）

情景浮现：后端没有给分页，一股脑全把数据给前端，比如请求过来有1941条信息，那么我们就应该在页面显示有多少页数据，多少条。以下为个人写的方法，可能方法有点蠢，不影响功能的

柔光的暖阳◎/ 2022年12月30日 10:51/ 0 赞/ 108 阅读

相关前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口

前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了，主要

女爷i/ 2022年11月18日 13:47/ 0 赞/ 594 阅读

相关 easyUI 分页前端分页与后端分页

前端分页初始化datagrid时加上Filter $('tabL'+currentCatalogId).datagrid({ loadFilter: pa

心已赠人/ 2022年05月19日 06:07/ 0 赞/ 432 阅读

相关 elementUI实现前端分页

　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((c

╰+攻爆jí腚メ/ 2021年12月23日 16:17/ 0 赞/ 381 阅读

相关 Vue - 纯前端（Vue + ElementUI）实现 table 表格分页功能

一. 思路 1. 如何获取当前页数据的第一条和最后一条的数据在总数据中的位置 2. 获取到当前页数据的第一条和最后一条的数据在总数据中的位置，怎么获取到对应的数据 3

柔情只为你懂/ 2021年07月25日 17:36/ 0 赞/ 605 阅读