当前位置：首页 > VUE

vue如何实现分页

2026-03-09 19:41:08VUE

实现分页的基本思路

在Vue中实现分页通常需要结合后端API和前端组件。后端负责处理数据的分页逻辑，前端负责展示分页控件和渲染分页数据。常见的分页组件包括页码按钮、上一页/下一页按钮以及跳转输入框。

后端API设计

后端API需要支持分页参数，通常使用page和pageSize两个参数。例如：

page表示当前页码。
pageSize表示每页显示的数据条数。

API返回的数据结构通常包含：

data：当前页的数据列表。
total：总数据条数。
totalPages：总页数（可选）。

前端分页组件实现

数据获取与分页逻辑

通过Vue的data定义分页相关变量：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    dataList: []
  }
}

在methods中定义获取分页数据的方法：

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(response => {
      this.dataList = response.data.data;
      this.total = response.data.total;
    });
  }
}

分页控件实现

可以使用第三方分页组件（如Element UI的el-pagination）或自定义分页控件。以下是自定义分页控件的示例：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ Math.ceil(total / pageSize) }}</span>
      <button @click="nextPage" :disabled="currentPage * pageSize >= total">下一页</button>
    </div>
  </div>
</template>

分页逻辑方法：

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

使用第三方分页组件

以Element UI的el-pagination为例：

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

事件处理：

methods: {
  handleCurrentChange(page) {
    this.currentPage = page;
    this.fetchData();
  }
}

分页样式优化

可以通过CSS美化分页控件，例如：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}

动态调整每页条数

如果需要支持动态调整每页条数，可以添加一个下拉选择框：

vue如何实现分页

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