资讯专栏INFORMATION COLUMN

vue分页组件

meislzhua / 1730人阅读

摘要:最近在做系统管理后台的需求,用了,体验还是挺好的,但是一直找不到一个比较好的分页组件,就自己整了一个。移动端可能不适合使用这个组件默认每个分页会带上类名,点击态会带上的类名,需要修改可以去改动的设置项目地址分页组件欢迎大家使用交流

最近在做系统管理后台的需求,用了vue,体验还是挺好的,但是一直找不到一个比较好的分页组件,就自己整了一个。

使用的方法如下,只要传递一个total总页数,current当前页码,还有点击的回调函数就行了,回调函数的第一个参数会带上你点击的页码



效果如下图

这个分页组件依赖jquery,是在bootstrap.pagination.js的基础上面修改的,因为是pc管理端,对页面大小的要求不是很大。移动端可能不适合使用这个组件

默认每个分页li会带上button类名,点击态会带上is-primary的类名,需要修改可以去改动pagination.js的设置

项目git地址vue分页组件

欢迎大家使用交流

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86632.html

相关文章

  • 基于vue实现分页/翻页组件paginator

    摘要:项目背景做列表页时不可避免会用到分页亲爱的们啊现在发放福利喽直接安装使用还有木有更方便的了哈哈这是一个基于的组件话不多说直接开撸地址当页数小于包括页页数大于页首页或尾页页之内显示正在研究怎么做出一个发布到网上后续会发地址安装传 项目背景 做列表页时,不可避免会用到分页,亲爱的们啊,现在发放福利喽!npm直接安装使用,还有木有更方便的了,O(∩_∩)O哈哈~这是一个基于vue的pagin...

    xuexiangjys 评论0 收藏0
  • 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    摘要:所以这就导致,页面内容正确,但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试,发现完美解决问题。 问题描述 当前页面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面showImg(https://segmentfa...

    YFan 评论0 收藏0
  • 第九集: 从零开始实现一套pc端vue的ui组件库( 分页组件 )

    摘要:第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式 第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式

    levy9527 评论0 收藏0
  • 第九集: 从零开始实现一套pc端vue的ui组件库( 分页组件 )

    摘要:第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式 第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式

    leoperfect 评论0 收藏0
  • 使用vue.js和webpack完成文章的评论和分页组件

    摘要:学习了一段时间,拿它来做个小组件,练习一下。源码放在文末的地址上。接下来看下评论组件条评论这里的将在下面提到,是我们获取数据的位置。最后一个是目前生成获取静态数据的文件头像用户名评论内容就这样了吧。 学习了vue.js一段时间,拿它来做2个小组件,练习一下。我这边是用webpack进行打包,也算熟悉一下它的运用。源码放在文末的 github 地址上。 首先是index.html ...

    李义 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<