element-ui官网上有分页实现的功能,简单方便又好用,也有很多分页的样式,你可以根据需要去选择自己想要的样式,下面这篇文章主要给大家介绍了关于Vue使用Element-UI实现分页效果的相关资料,需要的朋友可以参考下
前言
分页在展示数据列表的场景肯定是非常多的。
一般的项目开发中,数据量特别大,一般都是后端接口直接处理分页返回,前端直接调用即可。
但是前端也是可以不需要借助后端,自己也是可以处理分页的。今天我这个后端开发就站在前端的角度上,处理列表分页。
友情提示:
数据量大的情况下一定要后端处理分页,前端虽然可以实现,但是仅限数据量不是特别大的情况下!
先给大家看下我的列表,一个特别单纯的列表,只是返回一个用户列表,并且根据id倒叙排序。
给大家调用看下吧,一个很简单的结构:
技术选项:Pagination
这里我选择使用的是element-ui的分页:Pagination
它是ElementUI下的一个组件:
它的参数特别重要,我们就是借助这些参数实现的分页
以下案例我只是挑选个别参数,更多参数使用说明相间文档
大家根据自己的需求挑选一款即可,挑选不出来心仪可以参考我这一套,我也是精心挑选并且测试了很多参数。
增加分页代码
把这一块加到页面上,就有一个视觉上的分页效果了。
相关代码:
注意代码位置,我是把分页放在table下面了:
初始化数据
紧接着还要定义默认页和默认每页条数,以及数据列表
userTableData我是用过接口返回值赋值的。
data() { return { userTableData: [], // 用户列表 currentPage:1, // 初始页 pagesize:10, // 初始每页的数据 }; },
回调函数
然后就是对分页改变做出的回调函数:
逻辑写死即可,函数名需要和上面保持一致,通常直接复制即可。
// 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 },
到了这里你就可以看到列表分页了,但是会发现实际展示的数据和分页展示的不一致,不要着急,就差最后一步了 !
指定table分页
出现上面这种情况,是因为列表的data没有适配分页属性:
你现在的代码肯定是这样的:
最后一步,给要展示的table指定分页以及条件。
一行代码:
:data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
查看效果
这样就一个由前端代码实现的分页就完成了。我们检测下吧
初始化页面
因为我默认展示的就是第一页,并且每页展示10条嘛,所以就是这样的:
切换每页条数:
大概就是这样的,大家下去自己研究玩吧。
以下为我这个组件的全部代码,大家灵活cv即可:
新增用户 {{ scope.row.sex === 0 ? "女" : "男"}} {{scope.row.phone}} {{scope.row.status === 0 ? "正常" : "禁用"}} {{scope.row.birthday}} 删除 编辑
总结
感觉elementui对分页组件做的特别好。使用起来也特别简单,这样我不管从前后端哪个维度,都可以实现分页了,又多学了一个技能,如果这篇文章对你有用,那就是对我最大的支持!
以上就是Vue使用Element-UI实现分页效果全过程的详细内容,更多请关注0133技术站其它相关文章!