当前位置：首页 > VUE

vue实现分页请求

2026-01-17 09:30:44VUE

Vue 实现分页请求的方法

在 Vue 中实现分页请求通常需要结合前端分页组件和后端 API 的分页逻辑。以下是常见的实现方法：

分页组件与数据绑定

使用 v-pagination 或其他分页组件（如 Element UI 的 el-pagination）绑定分页数据：

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

数据请求与状态管理

在 Vue 组件的 data 或 setup 中定义分页相关变量：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    listData: []
  }
}

API 请求方法

封装带分页参数的 API 请求方法：

methods: {
  fetchData() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    axios.get('/api/data', { params })
      .then(response => {
        this.listData = response.data.items
        this.totalItems = response.data.total
      })
  }
}

分页事件处理

监听分页组件的事件并触发数据更新：

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

生命周期调用

在 mounted 或 created 钩子中初始化数据：

mounted() {
  this.fetchData()
}

可选优化

对于复杂场景，可以将分页逻辑提取到 Vuex 或 Pinia 中集中管理。若使用组合式 API，可以封装为可复用的分页 Hook：

import { ref } from 'vue'
export function usePagination(fetchFn) {
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  const loadData = () => {
    return fetchFn(currentPage.value, pageSize.value)
      .then(res => {
        total.value = res.total
        return res.data
      })
  }

  return { currentPage, pageSize, total, loadData }
}