Paging with elementUI

Paging is a necessary function of data management. It is an operation like this:

Each group of data is a page. When you click next page to request the interface of the next page, the back end will send you a value of the current page, such as pageNum, which will not let the front end take out all the data and then page it. As a result, the data will be too much and slow. The back end will page the data. The front end only needs to click next page or page number to request the interface, so here I am It is based on element UI pagination, combined with picture explanation.

<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,    //Total pages of data
        }
    },
     created(){
          this.SelectAllStudent(1);    //This is the first page by default
          this.ShowSchool()
      },
      methods:{
        //  paging
        handleCurrentChange(val){    //The current change function of paging will trigger when the current page changes
          this.page = val;
          this.SelectAllStudent(val)
        },
        //Interface for all students
        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,
          })
        },
}

The api of the official website is here, http://element-cn.eleme.io/#/zh-CN/component/pagination

Added by katlis on Tue, 17 Dec 2019 16:53:13 +0200