博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+element-ui 实现分页
阅读量:5075 次
发布时间:2019-06-12

本文共 1531 字,大约阅读时间需要 5 分钟。

    设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumpertotalsize和特殊的布局符号->->后的元素会靠右显示,jumper表示跳页元素,total表示显示页码总数,size用于设置每页显示的页码数量。

  

页数较少时的效果
大于 7 页时的效果

效果截图如下

 

我自己的项目中用到了el-table 索性完全贴出来了: 先贴代码

js部分(为展示分页效果,所以data里数据较长,耐心点找,哈哈)

css样式部分(可忽略)

到这里,效果已经出来了,直接上图,点击页码 table内容已经绑定

下面我们来分析代码,table不谈,这里主要讨论分页部分,

首页是给el-table部分绑定数据:如图

js部分的变动:

不懂total pagesize  currentPage作用的可以看下文档,来回调下值试试,我上面也作了注释。

转载于:https://www.cnblogs.com/sunjuncoder/p/9916053.html

你可能感兴趣的文章
[No0000195]NoSQL还是SQL?这一篇讲清楚
查看>>
【深度学习】caffe 中的一些参数介绍
查看>>
Python-Web框架的本质
查看>>
QML学习笔记之一
查看>>
Window 的引导过程
查看>>
App右上角数字
查看>>
从.NET中委托写法的演变谈开去(上):委托与匿名方法
查看>>
小算法
查看>>
201521123024 《java程序设计》 第12周学习总结
查看>>
新作《ASP.NET MVC 5框架揭秘》正式出版
查看>>
IdentityServer4-用EF配置Client(一)
查看>>
WPF中实现多选ComboBox控件
查看>>
读构建之法第四章第十七章有感
查看>>
Windows Phone开发(4):框架和页 转:http://blog.csdn.net/tcjiaan/article/details/7263146
查看>>
Unity3D研究院之打开Activity与调用JAVA代码传递参数(十八)【转】
查看>>
python asyncio 异步实现mongodb数据转xls文件
查看>>
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>
[ZJOI2007]棋盘制作 【最大同色矩形】
查看>>
IOS-图片操作集合
查看>>