Vue 中如何实现分页组件？

WBOY

发布时间：2023-06-25 08:23:36

3293人浏览过

来源于php中文网

原创

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 的内容如下：

mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

下载

在 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
  }
}