当前位置：首页 > VUE

vue怎么实现分页查询

2026-01-20 02:29:29VUE

Vue 实现分页查询的方法

后端 API 设计

后端需要提供支持分页的 API，通常包含 page（当前页码）和 pageSize（每页条数）参数。返回数据格式应包含总条数 total 和当前页的数据列表 list。

// 示例 API 返回格式
{
  "code": 200,
  "data": {
    "total": 100,
    "list": [
      { "id": 1, "name": "Item 1" },
      { "id": 2, "name": "Item 2" }
    ]
  }
}

前端数据请求

使用 axios 或其他 HTTP 库调用分页接口，传递分页参数。

import axios from 'axios';

export function fetchData(page, pageSize) {
  return axios.get('/api/data', {
    params: { page, pageSize }
  });
}

Vue 组件实现

在 Vue 组件中定义分页相关数据，调用接口并更新页面。

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

<script>
import { fetchData } from '@/api';

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      fetchData(this.page, this.pageSize).then(res => {
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    handlePageChange(page) {
      this.page = page;
      this.loadData();
    }
  }
};
</script>

使用 Element UI 分页组件

如果使用 Element UI，可以直接使用 <el-pagination> 组件。需监听 current-change 事件，在页码变化时重新加载数据。

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

自定义分页逻辑

若不使用 UI 库，可以手动实现分页逻辑。通过计算总页数 totalPages 和生成页码数组来控制分页。

computed: {
  totalPages() {
    return Math.ceil(this.total / this.pageSize);
  },
  pageNumbers() {
    const pages = [];
    for (let i = 1; i <= this.totalPages; i++) {
      pages.push(i);
    }
    return pages;
  }
}

前端本地分页

如果数据量较小，可以在前端本地实现分页。使用 slice 方法截取当前页数据。

vue怎么实现分页查询

methods: {
  getCurrentPageData() {
    const start = (this.page - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.allData.slice(start, end);
  }
}