ElementUI分页组件的使用

1.首先从官网把组件代码粘贴过来

<el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      @current-change="changePage"
 ></el-pagination>

解释一下其中核心属性,:totaltotal属性是总共有多少个数据,:page-size是每一页有多少数据,然后它会自动计算共有多少页，@current-change是在切换页面的时候，发生的事件，分页的核心也就是这个函数的编写

changePage(currentPage) {
      var that=this;
      this.axios
        .get("http://localhost:8088/custom/getPage/" + currentPage + "/"+this.size)
        .then(function(res) {
            that.tableData=res.data;
        });
    }

函数中的currentPage参数是点击某页的时候的页码,（结合上一篇博客，讲的是后端分页的实现）,然后把数据传过来

下面是初始化界面的时候的函数created(),和上面数据绑定的地方

created() {
    var that = this;
    this.axios
      .get("http://localhost:8088/custom/getPage/1/7")
      .then(function(res) {
        that.tableData = res.data;
        that.size = res.data.length;
        console.log(that.size);
      });
    this.axios.get("http://localhost:8088/custom/getAll").then(function(resq) {
      that.total = resq.data.length;
      console.log(that.total);
    });
  }

data() {
    return {
      tableData: [],
      total: 1,
      size: 1
    };
  }