vue+element-表格的分页实现

约定不等于承诺〃 2022-03-17 09:20 398阅读 0赞

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

效果：

![20190223153137121.gif][]

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

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数据重置一下，不然的话拿到的数据不会是最新的。

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

[20190223153137121.gif]: /images/20220317/72b4bd7671be4074936ee035730aac5c.png