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>

下面是后台返回的数据图片，具体数据就不贴出来了


最后效果展示：