vue+element-表格的分页实现

今天简单的介绍一下element的分页是怎么实现的，先说一下感受，之前一直是使用的jQuery的分页，其实也不全算是，使用的本质还是BootStrapUI的分页，感兴趣的可以翻翻我之前写的文章，有关于这块的，这里就不做任何的赘述，那么说这个原则是用完element的分页以后觉得真的是太简单的，简单的写完甚至没有一点的成就感。不BB，我们看效果和代码！

效果：

下面我们看一下代码是多简单的：

H5：（写到Html相应的位置）

 <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

 Date：（写到return里面）

        //分页
        currentPage:1,
        pagesize:10,
        total : 0,

JS：（写到method里面的）

 /**
       * @handleSizeChange  点击设置每页显示数量的时候触发的函数（该功能目前未开放）
       * @handleCurrentChange 点击页码的时候触发的函数
       * @param size 每页显示的页数
       * @param currentPage 当前的页码
       */
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.info(size)
      },
      handleCurrentChange: function(currentPage){
        let that = this;
        let url = 'http://'+that.url+'/breakfast/?page='+currentPage+'';
        that.currentPage = currentPage;
         this.$axios({
           method : 'get',
           url : url,
         }).then(function (res) {
            that.tableData = res.data.results;
         }).catch(function (err) {
            console.info(err);
         })
        console.info(currentPage)
      }

下面介绍一下：

第一个事件（Events）

size-change

该事件是在pageSize发生改变的时候触发的，什么叫pageSize呢？说人话就是每页显示多少条数据，这样可以适应一些情况，就是当用户的电脑比较大的时候他想一页看很多的数据，可以自己输入绑定对应的pagesize就可以了

第二个事件

current-change

其实会用这一个事件就足够了，因为这个事件就是当页码发生改变的时候触发的函数，所以做分页的核心就是这个事件，具体怎么使用的上面已经写好的有例子，不做赘述！

至于官方还给了另外两个事件一个是prev-click另一个是next-click这两个是当用户点击前一页或者后一页的时候触发的事件，那么其实意义不大，毕竟不管是点击前一页还是后一页页码都会发生变化，其实都会触发第二个事件，结果还是一样的，需要注意的就是每次获取数据以后不要忘记将自己绑定的data数据重置一下，不然的话拿到的数据不会是最新的。

因为这个本身是比较简单的操作，这里就不做太多的赘述，喜欢的朋友可以关注一下，鄙人新人一个，不会太高深的操作，但是基本的还都在慢慢的学，可以一起交流！