element ui前端分页 与后端分页的问题

区别:

前端分页:一次性请求所有数据 然后前端对数据进行截取展示
后端分页:需要我们把页码 请求条数发送给后端 后端根据条件每次返回对应的条数

前端分页

    <el-table
      :data="tableDatas.slice((currentPage-1)*PageSize,currentPage*PageSize)"

      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="currentPage"
                              :page-sizes="pageSizes"
                              :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                              :total="totalCount">
                 </el-pagination>

methods:{
 handleEdit(index, row) {
                  console.log(index, row);//这里可打印出每行的内容
                  //点击编辑
                  this.dialogFormVisible = true //显示弹框
                  this.editForm = Object.assign({}, row); // editForm是Dialog弹框的data
                  //显示编辑界面

              },
      handleDelete(index, row) {
        console.log(index, row);
      },
       handleSizeChange(val) {
                 // 改变每页显示的条数
                 this.PageSize=val
                 // 注意：在改变每页显示的条数时，要将页码显示到第一页
                 this.currentPage=1
             },
               // 显示第几页
             handleCurrentChange(val) {
                 // 改变默认的页数
                 this.currentPage=val
             },
    }
}

重点这句话

 :data="tableDatas.slice((currentPage-1)*PageSize,currentPage*PageSize)"

这个就是根据你的pageSzie 和currentPage来截取数据展示的

后端分页

 <el-table
             :data="tableData"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            </el-table>
  <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount"

              >
      </el-pagination>

 handleSizeChange(val) {
            // 改变每页显示的条数
            this.PageSize=val
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.getList() //pageSize改变是重新请求数据
            console.log(this.PageSize)
        },
  handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage=val
            // console.log(this.currentPage)
            this.$http.post('event.findAndCountAll.sys_enterprise',{
                where:{},
                page:{limit: this.PageSize,
                    page:this.currentPage}})
                .then((res) => {
                    // console.log(res.data)
                    // console.log(this.currentPage)

                    this.tableData=res.data
                    this.loading = false
                })
                .catch(() => { this.loading = false })
        },

注意 这个时候前端不需要做数据处理 我们只需要把pageSize和currentPage传给后端就可以了