使用elementUI进行分页处理

分页是数据管理必备的功能，是这样一种操作：

每一组数据是一页，当点击下一页的时候去请求下一页的接口，后端会传一个当前页的值给你，比如pageNum，不会让前端取出所有数据然后进行分页的，那样数据多了会很慢很慢，后端会把数据进行分页处理，前端只需要点击下一页或者页数去请求接口，那么我这里是基于ElementUI的分页，结合图片的讲解。

<template>
    <div class="block" style="float: right;margin-top: 15px">
      <el-pagination layout="prev, pager, next" :page-size="10" background :page-count="5" :total="total" @current-change="handleCurrentChange"></el-pagination>
    </div>
</template>
 export default {
    data(){
        return{
            total:null,    //数据的总页数
        }
    },
     created(){
          this.SelectAllStudent(1);    //这里默认是第一页
          this.ShowSchool()
      },
      methods:{
        //  分页
        handleCurrentChange(val){    //分页的点击函数current-change，在currentPage 改变时会触发
          this.page = val;
          this.SelectAllStudent(val)
        },
        //所有学生的接口
        SelectAllStudent(){ 
          const page = this.page;
          this.loading = true;
          this.$api.show.student(data=>{
            this.loading = false;
            this.tableData = data.data;
            this.total = data.total;
          },{
            pageNum:page,
            schoolNo:this.value===''?-1:this.value,
            classNo:this.classvalue===''?-1:this.classvalue,
            studentNo:this.studentNo===''?-1:this.studentNo,
            studentName:this.studentName,
            sex:this.sexvalue===''?-1:this.sexvalue,
            phone:this.phone,
            date:this.date,
          })
        },
}

官网的api在这，http://element-cn.eleme.io/#/zh-CN/component/pagination