VUE实现一个分页组件的示例
|
分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。 分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。 在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：
由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。 了解了流程，在Vue中实现一个分页组件也就变得简单了。 简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下： 由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。 了解了流程，在Vue中实现一个分页组件也就变得简单了。 简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下：
分页组件 template
style(scss) .paging-item {
display: inline;
font-size: 14px;
position: relative;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
border: 1px solid #ccc;
background-color: #fff;
margin-left: -1px;
cursor: pointer;
color: #0275d8;
&:first-child {
margin-left: 0;
}
&:hover {
background-color: #f0f0f0;
color: #0275d8;
}
&.paging-item--disabled,&.paging-item--more{
background-color: #fff;
color: #505050;
}
//禁用
&.paging-item--disabled {
cursor: not-allowed;
opacity: .75;
}
&.paging-item--more,&.paging-item--current {
cursor: default;
}
//选中
&.paging-item--current {
background-color: #0275d8;
color:#fff;
position: relative;
z-index: 1;
border-color: #0275d8;
}
}
}
javascript //页面中的可见页码，其他的以...替代,必须是奇数
perPages : {
type : Number,default : 5
},//当前页码
pageIndex : {
type : Number,default : 1
},//每页显示条数
pageSize : {
type : Number,default : 10
},//总记录数
total : {
type : Number,},methods : {
prev(){
if (this.index > 1) {
this.go(this.index - 1)
}
},next(){
if (this.index < this.pages) {
this.go(this.index + 1)
}
},first(){
if (this.index !== 1) {
this.go(1)
}
},last(){
if (this.index != this.pages) {
this.go(this.pages)
}
},go (page) {
if (this.index !== page) {
this.index = page
//父组件通过change方法来接受当前的页码
this.$emit('change',this.index)
}
}
},computed : { },data () { 父组件中使用 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
