elementui分页功能(当后端将所有数据全部返回,由前端处理)

情景浮现:后端没有给分页,一股脑全把数据给前端,比如请求过来有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>

下面是后台返回的数据图片,具体数据就不贴出来了
在这里插入图片描述
在这里插入图片描述
最后效果展示:
在这里插入图片描述

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以使用`element-ui`中提供的`el-pagination`组件实现分页,具体实现步骤如下: 1. 在Vue实例中定义一个变量来保存当前页码和每页显示的数据量。 ```javascript data() { return { currentPage: 1, pageSize: 10, total: 0, tableData: [] } } ``` 2. 在Vue实例中定义一个方法来处理数据的分页逻辑。该方法根据当前页码和每页显示的数据量,在所有数据数组中截取出对应页码的数据。 ```javascript methods: { handleCurrentChange(val) { this.currentPage = val; const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; this.tableData = this.allData.slice(start, end); } } ``` 3. 在Vue实例中定义一个钩子函数created(),在该函数中调用后端接口获取所有数据,并将数据保存到Vue实例中的一个数组中。 ```javascript created() { // 调用后端接口获取所有数据 axios.get('api/getAllData').then(response => { this.allData = response.data; this.total = this.allData.length; // 调用handleCurrentChange方法,显示第1页数据 this.handleCurrentChange(1); }).catch(error => { console.log(error); }); } ``` 4. 在Vue模板中使用`el-pagination`组件,并将该组件的`total`属性设置为保存所有数据的数组的长度,将该组件的`page-size`属性设置为每页显示的数据量,将该组件的`current-page`属性绑定到Vue实例中定义的变量上,将该组件的`@current-change`事件绑定到Vue实例中定义的方法上。 ```html <el-pagination :total="total" :page-size="pageSize" v-model="currentPage" @current-change="handleCurrentChange"> </el-pagination> ``` 5. 在Vue模板中使用`v-for`指令循环遍历处理后的分页数据,并将每页显示的数据渲染到页面上。 ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="age" label="年龄" width="180"> </el-table-column> </el-table> ``` 以上是基本实现思路,具体实现细节可以根据具体需求进行调整。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值