vue实现分页页码

实现分页页码的基本思路

在Vue中实现分页页码功能，通常需要结合后端API返回的分页数据（如总页数、当前页码等）和前端逻辑。核心是通过计算属性动态生成页码数组，并处理页码切换事件。

基础实现步骤

模板部分

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

脚本部分

<script>
export default {
  props: {
    totalItems: Number,  // 总数据量
    itemsPerPage: Number, // 每页条数
    currentPage: Number   // 当前页码
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    displayedPages() {
      const range = 2; // 显示前后页码范围
      const pages = [];
      for (let i = Math.max(1, this.currentPage - range); 
           i <= Math.min(this.currentPage + range, this.totalPages); 
           i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('page-change', this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('page-change', this.currentPage + 1);
      }
    },
    goToPage(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>

高级优化方案

添加省略号效果 当页码较多时，可通过判断添加省略号：

displayedPages() {
  const range = 2;
  const pages = [];
  const start = Math.max(1, this.currentPage - range);
  const end = Math.min(this.currentPage + range, this.totalPages);

  if (start > 1) pages.push(1, '...');
  for (let i = start; i <= end; i++) pages.push(i);
  if (end < this.totalPages) pages.push('...', this.totalPages);

  return pages.filter((page, index, array) => 
    page !== '...' || array[index] !== array[index + 1]
  );
}

处理省略号点击

goToPage(page) {
  if (page === '...') return;
  this.$emit('page-change', page);
}

样式建议

.pagination {
  display: flex;
  gap: 8px;
}
.pagination button {
  padding: 4px 8px;
}
.pagination span {
  padding: 4px 8px;
  cursor: pointer;
}
.pagination .active {
  font-weight: bold;
  color: blue;
}

组件使用示例

<Pagination
  :total-items="100"
  :items-per-page="10"
  :current-page="currentPage"
  @page-change="handlePageChange"
/>

注意事项

• 分页组件应设为无状态组件，通过props接收数据
• 页码切换事件通过$emit通知父组件
• 对于大型数据集，建议使用虚拟滚动代替传统分页
• 移动端可考虑添加手势滑动支持