后台管理系统中的前端分页和后端分页

前端分页

template:

<div class="pagination">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[15]"
            :page-size="15"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
            </el-pagination>
</div>

data:

totalCount:0,

currentPage:1,

totalCount存放总数，currentPage为当前页

methods:

      search:function(){
            var self = this;
            self.$axios.post(self.$global.host+'/api',{
                a:self.a,
            }).then((response) => {
                if(response.data.code=="000000"){
                    self.oldData = response.data.result;
                    self.totalCount = response.data.result.length;
                    self.showTable();
                }else{
                    self.$message({
                        message: response.data.message,
                        type: 'warning'
                    });
                    return false;
                }
            }, (response) => {
                    self.$message({
                        message: response.data.message,
                        type: 'warning'
                    });  
                    return false;
            })
      },

oldData存放所有数据

     showTable:function(){
        this.tableData = this.oldData.slice((this.currentPage-1)*15,this.currentPage*15);
      },
      handleCurrentChange(currentPage){
        this.currentPage = currentPage;
        this.showTable();
      },

因为我想15条/页，所以用15为基数分割