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数据重置一下，不然的话拿到的数据不会是最新的。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-02-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读