vue 是一款优秀的前端框架，在处理大量数据时，分页组件是必不可少的。分页组件可以使页面更加整洁，同时也可以提高用户体验。在vue中，实现一个分页组件并不复杂，本文将介绍vue如何实现分页组件。
一、需求分析
在实现分页组件前，我们需要对需求进行分析。一个基本的分页组件需要具有以下功能：
- 展示当前页数、总页数以及每页展示条数
- 点击分页按钮可以切换至不同页数
- 展示当前页的数据
- 当前页码高亮显示
- 显示分页条数选择器
二、实现步骤
- 划分文件
为方便管理，我们将分页组件拆分成三个文件：
立即学习“前端免费学习笔记（深入）”；
- Pagination.vue：分页组件的主文件，主要负责逻辑和事件处理。
- PaginationItem.vue：分页组件的子组件，主要负责渲染分页按钮。
- SelectPerPage.vue：分页条数选择器组件，主要负责渲染条数选择下拉框以及处理 change 事件。
- 分页数据的绑定
我们需要定义一些变量来存储分页相关的数据，包括当前页码、每页条数、总页数。这些变量应该在 Pagination.vue 中定义。同时，我们也需要引入一个 props 属性，用于接收父组件传递的数据。
export default {
props: {
currentPage: { // 当前页码
type: Number,
required: true
},
total: { // 总记录数
type: Number,
required: true
},
perPage: { // 每页展示条数
type: Number,
required: true
}
},
data () {
return {
pages: Math.ceil(this.total / this.perPage), // 总页数
pageList: [] // 存储当前页面展示的页码
}
},
mounted () {
this.getPageList(this.currentPage)
}
}- 渲染分页按钮
我们将分页按钮拆分成一个子组件，主要用于渲染分页按钮和处理分页切换事件。PaginationItem.vue 的内容如下：
<template>
<li :class="{ active: active }">
<a @click.prevent="handleClick" href="#">
{{ label }}
</a>
</li>
</template>
<script>
export default {
props: {
label: { // 按钮上的数字或图标
required: true
},
pageNum: { // 按钮代表的页码
required: true
},
active: { // 判断按钮是否处于激活状态
default: false
}
},
methods: {
// 点击分页按钮时触发
handleClick () {
this.$emit('change', this.pageNum)
}
}
}
</script>在 Pagination.vue 中，我们需要使用 v-for 指令来渲染多个 PaginationItem.vue 组件。页数应该按照一定规则生成，这个规则可以参考以下代码：
methods: {
// 获取当前页显示的页码
getPageList (currentPage) {
let pageList = [] // 存储页码数据
const totalPages = this.pages // 总页数
const visiblePages = 5 // 按钮可见的页码数
const half = Math.floor(visiblePages / 2) // 可见页码数的一半
// 如果总页数小于可显示页数
if (totalPages <= visiblePages) {
for (let i = 1; i <= totalPages; i++) {
pageList.push(i)
}
} else {
// 如果当前页码小于或等于可见页码数的一半
if (currentPage <= half) {
for (let i = 1; i <= visiblePages; i++) {
pageList.push(i)
}
} else if (currentPage >= totalPages - half) {
// 如果当前页码大于等于最后一页减去可见页码数的一半
for (let i = totalPages - visiblePages + 1; i <= totalPages; i++) {
pageList.push(i)
}
} else {
for (let i = currentPage - half; i <= currentPage + half; i++) {
pageList.push(i)
}
}
}
this.pageList = pageList
}
}- 分页的切换
我们需要将分页的切换事件绑定到 Pagination.vue 组件上。这个事件应该由 PaginationItem.vue 子组件触发，并将切换的页码作为参数传递。
在 Pagination.vue 中，我们需要新增一个方法 nextPage，用于更新当前页码。同时，我们还需要引入一个计算属性 currentIndex，用于获取当前页的索引。代码如下：
methods: {
// 点击页码时触发
handlePageChange (pageNum) {
// 如果页码为负数或者大于总页数都停止执行
if (pageNum <= 0 || pageNum > this.pages) return
this.currentPage = pageNum
this.$emit('change-page', pageNum) // 事件广播向父组件传值
this.getPageList(pageNum)
},
// 增加当前页码
nextPage () {
if (this.currentIndex < this.pages - 1) {
this.currentPage++
this.getPageList(this.currentPage)
this.$emit('change-page', this.currentPage) // 事件广播向父组件传值
}
}
},
computed: {
currentIndex () { // 当前页码所在的索引
return this.currentPage - 1
}
}- 分页条数选择下拉框
为了方便用户切换每页展示的记录数，我们需要实现一个下拉框组件。这个组件应该由 SelectPerPage.vue 文件来实现。
SelectPerPage.vue 的内容如下：
<template>
<div class="select-per-page">
<select :value="perPage" @change="changePerPage">
<option v-for="item in items" :value="item">{{ item }}</option>
</select>
</div>
</template>
<script>
export default {
props: {
perPage: { // 每页展示条数
type: Number,
required: true
},
options: { // 可选的条数设置
type: Array,
default () {
return [10, 20, 30, 50]
}
}
},
computed: {
items () {
return this.options.map(option => `${option} 条`)
}
},
methods: {
// 切换每页展示的条数
changePerPage (event) {
const perPage = +event.target.value.replace(/[D]/g, '')
this.$emit('update:perPage', perPage)
this.$emit('change-per-page', perPage) // 事件广播向父组件传值
}
}
}
</script>以上就是Vue实现分页组件的全部内容。我们需要在父组件中引入Pagination.vue，然后传递相应的currentPage、total和perPage等参数即可。这样就可以实现一个可复用的分页组件，提高了前端开发的效率和开发体验。
