当前位置：首页 > VUE

vue实现接口分页

2026-03-09 13:12:40VUE

实现接口分页的步骤

在Vue中实现接口分页通常需要结合后端API和前端组件，以下是一个完整的实现方案：

后端API准备

确保后端API支持分页参数，常见的分页参数为page和pageSize：

page: 当前页码
pageSize: 每页数据量

API响应应包含：

vue实现接口分页

{
  "data": [],
  "total": 100,
  "page": 1,
  "pageSize": 10
}

前端数据请求

使用axios或其他HTTP库请求分页数据：

async fetchData(page = 1, pageSize = 10) {
  try {
    const response = await axios.get('/api/data', {
      params: { page, pageSize }
    });
    this.listData = response.data.data;
    this.total = response.data.total;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

分页组件集成

使用Element UI或Ant Design Vue等UI库的分页组件：

vue实现接口分页

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

处理分页事件

在methods中定义页码变更处理函数：

handlePageChange(page) {
  this.currentPage = page;
  this.fetchData(page, this.pageSize);
}

初始化加载数据

在created或mounted生命周期中初始化数据：

created() {
  this.fetchData();
}

完整组件示例

<template>
  <div>
    <table>
      <!-- 数据列表渲染 -->
    </table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    async fetchData(page = 1, pageSize = 10) {
      // 数据请求逻辑
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData(page, this.pageSize);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>