当前位置：首页 > VUE

vue实现分页查询数据

2026-02-24 22:34:19VUE

实现分页查询的基本思路

在Vue中实现分页查询通常需要结合前端分页逻辑和后端API支持。前端负责渲染分页控件和处理用户交互，后端根据页码和每页数量返回对应数据。

后端API准备

确保后端API支持分页参数，常见参数包括：

page: 当前页码
pageSize: 每页数据量
返回数据应包含：
- items: 当前页数据列表
- total: 总数据量（用于计算总页数）

示例API响应格式：

{
  "items": [...],
  "total": 100
}

前端组件实现

数据定义

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

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

请求方法

创建获取分页数据的方法：

methods: {
  async fetchData() {
    this.loading = true
    try {
      const res = await api.get('/list', {
        params: {
          page: this.pagination.page,
          pageSize: this.pagination.pageSize
        }
      })
      this.list = res.data.items
      this.pagination.total = res.data.total
    } finally {
      this.loading = false
    }
  }
}

分页控件

使用Element UI的分页组件示例：

<el-pagination
  v-model:current-page="pagination.page"
  :page-size="pagination.pageSize"
  :total="pagination.total"
  @current-change="fetchData"
  layout="total, prev, pager, next"
/>

初始化调用

在mounted钩子中初始化数据：

mounted() {
  this.fetchData()
}

完整组件示例

<template>
  <div>
    <el-table :data="list" v-loading="loading">
      <!-- 表格列定义 -->
    </el-table>

    <el-pagination
      v-model:current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="fetchData"
      layout="total, prev, pager, next"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await api.get('/list', {
          params: {
            page: this.pagination.page,
            pageSize: this.pagination.pageSize
          }
        })
        this.list = res.data.items
        this.pagination.total = res.data.total
      } finally {
        this.loading = false
      }
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

优化建议

添加防抖处理避免频繁请求
支持每页条数动态调整
处理请求错误情况
添加空数据提示
在路由中保存当前页码状态

纯前端分页实现

如果数据量不大，也可以在前端实现完整分页：

vue实现分页查询数据

// 获取所有数据后
frontendPaginate(allData, page, pageSize) {
  const start = (page - 1) * pageSize
  return {
    items: allData.slice(start, start + pageSize),
    total: allData.length
  }
}