vue实现分页按钮

实现分页按钮的基本思路

在Vue中实现分页按钮通常需要结合计算属性、事件绑定和动态样式。核心逻辑包括计算总页数、生成页码数组、处理页码切换事件以及高亮当前页码。

基础实现代码示例

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)"
      :disabled="currentPage === 1"
    >
      上一页
    </button>

    <button
      v-for="page in pages"
      :key="page"
      @click="changePage(page)"
      :class="{ active: currentPage === page }"
    >
      {{ page }}
    </button>

    <button
      @click="changePage(currentPage + 1)"
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    pages() {
      const range = [];
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

<style>
.pagination {
  display: flex;
  gap: 5px;
}
.pagination button {
  padding: 5px 10px;
  cursor: pointer;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

优化显示页码数量

当页码较多时，可以限制显示的页码数量：

pages() {
  const maxVisible = 5; // 最多显示5个页码
  const half = Math.floor(maxVisible / 2);
  let start = Math.max(this.currentPage - half, 1);
  let end = Math.min(start + maxVisible - 1, this.totalPages);

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

  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

添加省略号效果

对于超多页码的情况，可以添加省略号：

<button v-if="showStartEllipsis" disabled>...</button>
<button v-if="showEndEllipsis" disabled>...</button>

computed: {
  showStartEllipsis() {
    return this.pages[0] > 2;
  },
  showEndEllipsis() {
    return this.pages[this.pages.length - 1] < this.totalPages - 1;
  }
}

使用第三方库

对于更复杂的需求，可以考虑使用现成的分页组件库：

• vue-paginate
• v-pagination
• element-ui 的 Pagination 组件

安装示例（以element-ui为例）：

npm install element-ui

使用示例：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="itemsPerPage"
    :total="totalItems"
    @current-change="handleCurrentChange"
    layout="prev, pager, next"
  />
</template>

注意事项

1. 分页组件应该是一个受控组件，通过props接收当前页码，通过事件通知父组件页码变化
2. 考虑添加键盘导航支持，监听键盘事件处理页码切换
3. 移动端适配时可能需要调整按钮大小和间距
4. 对于大量数据，考虑实现无限滚动作为分页的替代方案