在php中用vue写分页,使用Vue实现一个分页组件

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。

分页大多数(基本上)情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。

在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：

请求API，返回第一屏数据(pageSize内)以及所有相关条件的数据总量count

将数据总量传递给page组件，来计算页码并渲染到页面上

点击页码，发送请求获取该页码的数据，返回数据总量count以及该页码下的数据条目。

由于获取数据条件的变化(假设是个搜索，关键词变了)，count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程，在Vue中实现一个分页组件也就变得简单了。

简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，一节尾页按钮；超出范围的页码以...来代替，效果图如下：

分页组件

template

• :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]"

  @click="prev">prev

• :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]"

  @click="first">first

• :class="['paging-item', 'paging-item--more']"

  v-if="showPrevMore">...

• :class="['paging-item', {'paging-item--current' : index === pager}]"

  v-for="pager in pagers"

  @click="go(pager)">{{ pager }}

• :class="['paging-item', 'paging-item--more']"

  v-if="showNextMore">...

• :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]"

  @click="last">last

• :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]"

  @click="next">next

style(scss)

.mo-paging {

display: inline-block;

padding: 0;

margin: 1rem 0;

font-size: 0;

list-style: none;

user-select: none;

> .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

export default {

name : 'MoPaging',

//通过props来接受从父组件传递过来的值

props : {

//页面中的可见页码，其他的以...替代, 必须是奇数

perPages : {

type : Number,

default : 5

},

//当前页码

pageIndex : {

type : Number,

default : 1

},

//每页显示条数

pageSize : {

type : Number,

default : 10

},

//总记录数

total : {

type : Number,

default : 1

},

},

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 : {

//计算总页码

pages(){

return Math.ceil(this.size / this.limit)

},

//计算页码，当count等变化时自动计算

pagers () {

const array = []

const perPages = this.perPages

const pageCount = this.pages

let current = this.index

const _offset = (perPages - 1) / 2

const offset = {

start : current - _offset,

end : current + _offset

}

//-1, 3

if (offset.start < 1) {

offset.end = offset.end + (1 - offset.start)

offset.start = 1

}

if (offset.end > pageCount) {

offset.start = offset.start - (offset.end - pageCount)

offset.end = pageCount

}

if (offset.start < 1) offset.start = 1

this.showPrevMore = (offset.start > 1)

this.showNextMore = (offset.end < pageCount)

for (let i = offset.start; i <= offset.end; i++) {

array.push(i)

}

return array

}

},

data () {

return {

index : this.pageIndex, //当前页码

limit : this.pageSize, //每页显示条数

size : this.total || 1, //总记录数

showPrevMore : false,

showNextMore : false

}

},

watch : {

pageIndex(val) {

this.index = val || 1

},

pageSize(val) {

this.limit = val || 10

},

total(val) {

this.size = val || 1

}

}

}

父组件中使用

• ...

:page-index="currentPage"

:totla="count"

:page-size="pageSize"

@change="pageChange">

import MoPaging from './paging'

export default {

//显示的声明组件

components : {

MoPaging

},

data () {

return {

pageSize : 20 , //每页显示20条数据

currentPage : 1, //当前页码

count : 0, //总记录数

items : []

}

},

methods : {

//获取数据

getList () {

//模拟

let url = `/api/list/?pageSize=${this.pageSize}&currentPage=${this.currentPage}`

this.$http.get(url)

.then(({body}) => {

//子组件监听到count变化会自动更新DOM

this.count = body.count

this.items = body.list

})

},

//从page组件传递过来的当前page

pageChange (page) {

this.currentPage = page

this.getList()

}

},

mounted() {

//请求第一页数据

this.getList()

}

}

本文首发于我的博客