当前位置：首页 > VUE

vue实现分页请求

2026-03-09 14:50:02VUE

实现分页请求的基本思路

在Vue中实现分页请求通常需要结合后端API的分页参数（如page和pageSize）以及前端的分页组件（如el-pagination）。核心逻辑是通过改变分页参数触发数据重新请求。

分页组件与数据绑定

使用el-pagination组件绑定分页参数，监听页码变化事件：

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total">
</el-pagination>

定义分页数据与请求方法

在Vue的data中定义分页相关变量，并在methods中实现请求逻辑：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    listData: []
  }
},
methods: {
  async fetchData() {
    const res = await axios.get('/api/list', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    });
    this.listData = res.data.items;
    this.total = res.data.total;
  },
  handlePageChange(page) {
    this.currentPage = page;
    this.fetchData();
  }
}

初始化加载数据

在mounted钩子中触发首次数据加载：

mounted() {
  this.fetchData();
}

完整组件示例

结合模板与逻辑的完整组件示例：

vue实现分页请求

<template>
  <div>
    <ul>
      <li v-for="item in listData" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      listData: []
    }
  },
  methods: {
    async fetchData() {
      const res = await axios.get('/api/list', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize
        }
      });
      this.listData = res.data.items;
      this.total = res.data.total;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>