脚本宝典收集整理的这篇文章主要介绍了

vue分页组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="最近在做系统管理后台的需求,用了vue,体验还是挺好的,但是一直找不到一个比较好的分页组件,就自己整了一个。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">最近在做系统管理后台的需求,用了vue,体验还是挺好的,但是一直找不到一个比较好的分页组件,就自己整了一个。</code></pre> </blockquote> <p>使用的方法如下,只要传递一个total总页数,current当前页码,还有点击的回调函数就行了,回调函数的第一个参数会带上你点击的页码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <h2 style=&quot;text-align: center&quot;>现在是第{{current}}页</h2> <pagination :total=&quot;total&quot; :current=&quot;current&quot; :callback=&quot;changePage&quot;></pagination> </div> <p></template></p> <p><script> import pagination from './pagination/pagination.vue' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { current:1, total:10 } }, components:{ pagination }, methods:{ changePage:function(page){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.current = page; //分页操作这里 } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center"</span>&gt;</span>现在是第{{current}}页<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">pagination</span> <span class="hljs-attr">:total</span>=<span class="hljs-string">"total"</span> <span class="hljs-attr">:current</span>=<span class="hljs-string">"current"</span> <span class="hljs-attr">:callback</span>=<span class="hljs-string">"changePage"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pagination</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> pagination <span class="hljs-keyword">from</span> <span class="hljs-string">'./pagination/pagination.vue'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">current</span>:<span class="hljs-number">1</span>, <span class="hljs-attr">total</span>:<span class="hljs-number">10</span> } }, <span class="hljs-attr">components</span>:{ pagination }, <span class="hljs-attr">methods</span>:{ <span class="hljs-attr">changePage</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">page</span>)</span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.current = page; <span class="hljs-comment">//分页操作这里</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>效果如下图<br /><span class="img-wrap"><img data-src="/img/bVHlmS?w=577&amp;h=161" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>这个分页组件依赖jquery,是在bootstrap.pagination.js的基础上面修改的,因为是pc管理端,对页面大小的要求不是很大。移动端可能不适合使用这个组件</p> <p>默认每个分页li会带上button类名,点击态会带上is-primary的类名,需要修改可以去改动pagination.js的设置</p> <p>项目git地址<a href="https://github.com/xyc-cn/vue-pagination" rel="nofollow noreferrer" target="_blank">vue分页组件</a></p> <p>欢迎大家使用交流</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue分页组件

全部内容,希望文章能够帮你解决

vue分页组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过