所属分类:web前端开发
Vue 是一款优秀的前端框架,在处理大量数据时,分页组件是必不可少的。分页组件可以使页面更加整洁,同时也可以提高用户体验。在Vue中,实现一个分页组件并不复杂,本文将介绍Vue如何实现分页组件。
一、需求分析
在实现分页组件前,我们需要对需求进行分析。一个基本的分页组件需要具有以下功能:
二、实现步骤
为方便管理,我们将分页组件拆分成三个文件:
我们需要定义一些变量来存储分页相关的数据,包括当前页码、每页条数、总页数。这些变量应该在 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>