当前位置：首页 > VUE

vue实现分页查询

2026-02-20 04:59:06VUE

Vue 实现分页查询的方法

后端准备分页接口

确保后端提供支持分页的 API 接口，通常需要传递 page（当前页）和 pageSize（每页条数）参数。接口返回数据应包含分页信息（如总条数 total、当前页数据 list）。

前端封装分页请求

在 Vue 中通过 axios 或其他请求工具调用分页接口，动态传递分页参数。

import axios from 'axios';

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

定义分页数据与状态

在 Vue 组件中定义分页相关数据（当前页、每页条数、总条数等）和列表数据。

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    list: []
  };
}

加载分页数据

在 methods 中编写加载分页数据的方法，调用接口并更新数据。

methods: {
  loadData() {
    getPagedData(this.currentPage, this.pageSize).then(res => {
      this.list = res.data.list;
      this.total = res.data.total;
    });
  }
}

监听分页参数变化

通过 watch 或直接在翻页事件中触发数据加载，确保参数变化时重新请求数据。

watch: {
  currentPage() {
    this.loadData();
  }
}

使用分页组件

在模板中引入分页组件（如 Element UI 的 el-pagination），绑定分页参数和事件。

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

完整组件示例

整合以上代码的完整组件示例：

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

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

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