elementui分页组件配合后端接口的使用

分页分为前端分页和后端分页，前端分页是先获取所有数据前端再来分页。性能不好
后端分页就是把数据传给后端，后端返回当前页相应的数据

后端分页：

在表格</el-table>后面加上分页代码，如果是其他的比如列表分页，我估计也是要放在</>外面

<el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="currentPage"
   :page-sizes="[10, 20, 30, 40, 50]"
   :page-size="pagesize"
   layout="total, sizes, prev, pager, next, jumper"
   :total="totalCount">
 </el-pagination>

在data里面定义数据

 pagesize:10,    //    每页的数据
 tableData: [],
 currentPage:1,//第几页
 totalCount:1,//总条数 这些数据虽然后面会赋值为后端返回的数，但是最好不要为空
 pagesize:10,//每页显示的条数

写在methods里面的方法

//每页几条数据，第几页
    getData(n1,n2){
      let params = {
        "page": n2,
        "rows": n1,
        //后端接口需要传的参数
      }
      this.$http.post('后端的url',params)
      .then(function(res){
        this.tableData = res.data.data.records//具体根据后端返回的数据结构，代码主要是取后端返回的数据
        this.totalCount = res.data.data.total//这个是后端返回的总数        
      }).catch(function(error){
        console.log(error)
          // 响应错误回调
      })
    },
    //每页显示的条数
    handleSizeChange(val){
      this.pagesize = val
      this.getData(val,1)
      this.currentPage = 1
    },
    //显示第几页
    handleCurrentChange(val){
      this.currentPage = val
      this.getData(this.pagesize,val)
    },

写在created里面的方法

 created(){
    this.getData(this.pagesize,this.currentPage)
  },
  //两个参数就是之前data里面设置的数，意思就是页面初始化时需要多少条条数据