当前位置：首页 > VUE

vue分页组件实现流程

2026-02-22 20:55:07VUE

分页组件实现流程

在Vue中实现分页组件，通常需要结合数据分页逻辑和UI交互。以下是分页组件的核心实现步骤：

数据准备与分页逻辑

定义分页相关数据属性，包括当前页码、每页条数、总数据量等：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: []
  }
}

计算总页数：

computed: {
  totalPages() {
    return Math.ceil(this.totalItems / this.pageSize)
  }
}

实现分页数据获取方法（通常通过API）：

methods: {
  fetchData() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    // 实际项目中这里通常是API调用
    this.items = allItems.slice(start, end)
  }
}

分页UI组件实现

创建基础分页按钮结构：

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

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

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

实现页码切换逻辑：

methods: {
  changePage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page
      this.fetchData()
    }
  }
}

计算显示的页码范围（避免过多页码）：

computed: {
  pageRange() {
    const range = []
    const start = Math.max(1, this.currentPage - 2)
    const end = Math.min(this.totalPages, this.currentPage + 2)

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

样式与交互优化

添加基础样式：

.pagination {
  display: flex;
  gap: 5px;
}

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.pagination button.active {
  background: #409eff;
  color: white;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

组件化与复用

将分页组件封装为可复用组件：

// Pagination.vue
export default {
  props: {
    currentPage: Number,
    totalItems: Number,
    pageSize: Number
  },
  // 其他逻辑同上
}

父组件中使用：

<Pagination
  :current-page="currentPage"
  :total-items="totalItems"
  :page-size="pageSize"
  @page-change="handlePageChange"
/>

高级功能扩展

添加每页条数选择器：

<select v-model="pageSize" @change="handlePageSizeChange">
  <option value="5">5条/页</option>
  <option value="10">10条/页</option>
  <option value="20">20条/页</option>
</select>

添加跳转到指定页码功能：

vue分页组件实现流程

<input 
  type="number" 
  v-model="jumpPage" 
  min="1" 
  :max="totalPages"
>
<button @click="jumpToPage">跳转</button>

methods: {
  jumpToPage() {
    const page = parseInt(this.jumpPage)
    if (page >= 1 && page <= this.totalPages) {
      this.changePage(page)
    }
  }
}