当前位置：首页 > VUE

vue实现页面组件分页

2026-02-24 06:15:52VUE

实现分页的基本思路

在Vue中实现分页功能通常需要结合后端API返回的分页数据或前端本地数据的分页处理。核心逻辑包括计算总页数、当前页数据切片、页码切换事件等。

后端API分页实现

假设后端API支持分页参数（如page和pageSize），可通过axios获取数据：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: []
  }
},
methods: {
  fetchData() {
    axios.get('/api/items', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.items = response.data.items
      this.totalItems = response.data.total
    })
  }
}

前端本地分页实现

若数据已全部加载到前端，可通过计算属性实现分页：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.allItems.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.allItems.length / this.pageSize)
  }
}

分页组件集成

推荐使用成熟的UI库如Element UI的分页组件：

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

自定义分页组件实现

如需自定义分页组件，可参考以下模板：

<div class="pagination">
  <button 
    @click="prevPage" 
    :disabled="currentPage === 1">
    上一页
  </button>

  <span v-for="page in pageRange" 
        @click="goToPage(page)"
        :class="{ active: page === currentPage }">
    {{ page }}
  </span>

  <button 
    @click="nextPage" 
    :disabled="currentPage === totalPages">
    下一页
  </button>
</div>

对应逻辑处理：

computed: {
  pageRange() {
    const range = []
    const maxVisible = 5 // 显示的最大页码数
    let start = Math.max(1, this.currentPage - 2)
    let end = Math.min(this.totalPages, start + maxVisible - 1)

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

    for (let i = start; i <= end; i++) {
      range.push(i)
    }
    return range
  }
},
methods: {
  goToPage(page) {
    if (page !== this.currentPage) {
      this.currentPage = page
      this.fetchData()
    }
  }
}

样式优化建议

添加基础CSS样式增强用户体验：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button, .pagination span {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.pagination span.active {
  font-weight: bold;
  color: #409EFF;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}