当前位置：首页 > VUE

vue实现分页组件思路

2026-01-23 15:50:12VUE

Vue 分页组件实现思路

核心逻辑设计

分页组件的核心是计算页码范围和动态渲染页码按钮。需要定义当前页码（currentPage）、总数据量（total）、每页条数（pageSize）等关键属性，通过计算属性动态生成页码数组。

计算页码范围的公式示例： $visiblePages = Math.ceil(total / pageSize)$ $startPage = Math.max(1, currentPage - Math.floor(maxVisibleButtons / 2))$

组件props定义

props: {
  total: {
    type: Number,
    required: true
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  maxVisibleButtons: {
    type: Number,
    default: 5
  }
}

模板结构示例

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <template v-for="page in pages">
      <button 
        :key="page"
        :class="{ active: page === currentPage }"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
    </template>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

计算属性实现

computed: {
  totalPages() {
    return Math.ceil(this.total / this.pageSize)
  },
  pages() {
    const range = []
    const half = Math.floor(this.maxVisibleButtons / 2)
    let start = Math.max(1, this.currentPage - half)
    let end = Math.min(this.totalPages, start + this.maxVisibleButtons - 1)

    if (end - start + 1 < this.maxVisibleButtons) {
      start = Math.max(1, end - this.maxVisibleButtons + 1)
    }

    for (let i = start; i <= end; i++) {
      range.push(i)
    }

    return range
  }
}

事件处理方法

methods: {
  changePage(page) {
    if (page !== this.currentPage) {
      this.$emit('page-change', page)
    }
  },
  prevPage() {
    this.changePage(this.currentPage - 1)
  },
  nextPage() {
    this.changePage(this.currentPage + 1)
  }
}

样式优化建议

添加过渡动画和状态样式提升用户体验：

.pagination button {
  margin: 0 5px;
  transition: all 0.3s ease;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}