Vue 中如何实现分页组件？

Vue 是一款优秀的前端框架，在处理大量数据时，分页组件是必不可少的。分页组件可以使页面更加整洁，同时也可以提高用户体验。在Vue中，实现一个分页组件并不复杂，本文将介绍Vue如何实现分页组件。

一、需求分析

在实现分页组件前，我们需要对需求进行分析。一个基本的分页组件需要具有以下功能：

1. 展示当前页数、总页数以及每页展示条数
2. 点击分页按钮可以切换至不同页数
3. 展示当前页的数据
4. 当前页码高亮显示
5. 显示分页条数选择器

二、实现步骤

1. 划分文件

为方便管理，我们将分页组件拆分成三个文件：

• Pagination.vue：分页组件的主文件，主要负责逻辑和事件处理。
• PaginationItem.vue：分页组件的子组件，主要负责渲染分页按钮。
• SelectPerPage.vue：分页条数选择器组件，主要负责渲染条数选择下拉框以及处理 change 事件。

2. 分页数据的绑定

我们需要定义一些变量来存储分页相关的数据，包括当前页码、每页条数、总页数。这些变量应该在 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)
  }
}

3. 渲染分页按钮

我们将分页按钮拆分成一个子组件，主要用于渲染分页按钮和处理分页切换事件。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
  }
}

4. 分页的切换

我们需要将分页的切换事件绑定到 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
  }
}

5. 分页条数选择下拉框

为了方便用户切换每页展示的记录数，我们需要实现一个下拉框组件。这个组件应该由 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>