当前位置：首页 > VUE

vue2实现分页

2026-02-21 19:07:48VUE

Vue2 实现分页功能

在 Vue2 中实现分页功能通常需要结合后端 API 返回的分页数据和前端的分页组件。以下是一个完整的实现方案：

数据准备

需要定义分页相关的数据变量：

data() {
  return {
    currentPage: 1, // 当前页码
    pageSize: 10,   // 每页显示数量
    total: 0,       // 总数据量
    list: [],       // 当前页数据
    loading: false  // 加载状态
  }
}

获取分页数据方法

创建获取分页数据的方法，通常会调用 API 接口：

methods: {
  fetchData() {
    this.loading = true
    api.getList({
      page: this.currentPage,
      size: this.pageSize
    }).then(res => {
      this.list = res.data.list
      this.total = res.data.total
    }).finally(() => {
      this.loading = false
    })
  }
}

分页组件使用

在模板中使用 Element UI 的分页组件（或其他 UI 库的分页组件）：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

处理分页事件

添加分页事件处理方法：

methods: {
  handleSizeChange(val) {
    this.pageSize = val
    this.fetchData()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

初始加载数据

在 created 或 mounted 钩子中首次加载数据：

created() {
  this.fetchData()
}

自定义分页组件（可选）

如果需要自定义分页组件，可以这样实现：

<div class="pagination">
  <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
  <span>第 {{ currentPage }} 页</span>
  <button @click="nextPage" :disabled="currentPage * pageSize >= total">下一页</button>
</div>

对应的方法：

methods: {
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
      this.fetchData()
    }
  },
  nextPage() {
    if (this.currentPage * this.pageSize < this.total) {
      this.currentPage++
      this.fetchData()
    }
  }
}

样式优化

添加基本样式使分页更美观：

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagination button {
  padding: 5px 10px;
  cursor: pointer;
}