我之前也碰到过找不到真实数据分页示例的问题，下面给你一个清晰的实操方案，不管是前端本地分页还是后端接口分页的场景都能直接复用：

1. 先安装依赖 #

首先确保你已经安装了这个库：

npm install vue-pagination-2 --save

2. 完整Vue组件示例（前端分页场景） #

这是最常见的本地数据分页场景，假设你已经从后端拿到了全部数据，前端做分页切割：

<template>
  <div class="pagination-demo">
    <!-- 展示当前页的数据列表 -->
    <div class="data-list">
      <div v-for="(item, idx) in currentPageData" :key="idx" class="data-item">
        <h4>{{ item.name }}</h4>
        <p>ID: {{ item.id }} | 分类: {{ item.category }}</p>
      </div>
    </div>

    <!-- 引入vue-pagination-2组件 -->
    <pagination
      :total="totalDataCount"
      :per-page="itemsPerPage"
      :current-page="currentPage"
      @page-changed="handlePageChange"
      :max-size="5" <!-- 控制分页按钮显示的数量 -->
    />
  </div>
</template>

<script>
// 导入分页组件
import Pagination from 'vue-pagination-2'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      // 存储从后端获取的全部数据（真实场景用axios/fetch请求）
      fullData: [],
      currentPage: 1, // 当前选中的页码
      itemsPerPage: 6, // 每页展示的数据条数
      totalDataCount: 0 // 总数据量
    }
  },
  computed: {
    // 计算当前页需要展示的数据片段
    currentPageData() {
      const startIdx = (this.currentPage - 1) * this.itemsPerPage
      const endIdx = startIdx + this.itemsPerPage
      return this.fullData.slice(startIdx, endIdx)
    }
  },
  mounted() {
    // 模拟从后端获取数据的异步请求
    this.loadFullData()
  },
  methods: {
    loadFullData() {
      // 这里用setTimeout模拟接口请求，真实项目替换成你的API调用
      setTimeout(() => {
        // 生成20条模拟数据，对应4页（每页6条）
        this.fullData = Array.from({ length: 20 }, (_, i) => ({
          id: i + 1,
          name: `商品${i + 1}`,
          category: i % 3 === 0 ? '数码' : i % 3 === 1 ? '服饰' : '家居'
        }))
        this.totalDataCount = this.fullData.length
      }, 800)
    },
    // 页码切换时的回调函数
    handlePageChange(newPage) {
      this.currentPage = newPage
      // 如果是滚动页面，这里可以加上回到顶部的逻辑
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
.pagination-demo {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.data-list {
  margin-bottom: 2rem;
}
.data-item {
  padding: 1.2rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 1rem;
}
/* 分页组件的样式可以根据需求自定义，或者用库自带的基础样式 */
</style>

3. 后端分页场景调整 #

如果你的数据量很大，需要后端做分页返回（比如接口需要传page和pageSize参数），只需要修改数据请求和分页逻辑：

// 修改loadFullData方法，支持传页码参数
async loadFullData(page = 1) {
  try {
    // 真实API请求示例，替换成你的接口地址
    const res = await this.$axios.get('/api/get-data', {
      params: {
        page: page,
        pageSize: this.itemsPerPage
      }
    })
    // 假设接口返回结构：{ data: [], total: 20 }
    this.fullData = res.data.data // 当前页的数据
    this.totalDataCount = res.data.total // 总数据条数
    this.currentPage = page
  } catch (err) {
    console.error('数据请求失败:', err)
  }
}

// 修改handlePageChange方法
handlePageChange(newPage) {
  this.loadFullData(newPage)
}

关键要点说明 #

• 计算属性currentPageData：前端分页的核心，通过截取数组片段实现当前页数据展示。
• 分页组件参数：total是总数据量，per-page是每页条数，current-page是当前页码，@page-changed是页码切换的回调事件。
• 样式自定义：你可以通过给分页组件添加class或者修改全局样式来调整分页按钮的外观，适配你的项目UI。

内容的提问来源于stack exchange，提问作者user14166158