当前位置：首页 > VUE

使用vue实现分页查询

2026-01-20 21:50:45VUE

使用 Vue 实现分页查询

核心组件与逻辑

分页查询通常需要结合后端 API 和前端组件实现。以下是一个基于 Vue 3 的完整实现方案：

数据准备与状态管理

在 Vue 组件中定义分页相关数据：

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

分页请求方法

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

使用vue实现分页查询

methods: {
  async fetchData() {
    this.loading = true;
    try {
      const res = await axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      });
      this.tableData = res.data.list;
      this.totalItems = res.data.total;
    } finally {
      this.loading = false;
    }
  }
}

分页组件集成

使用 Element UI 的分页组件（或其他 UI 库）：

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

事件处理

实现分页相关事件处理：

使用vue实现分页查询

methods: {
  handlePageChange(val) {
    this.currentPage = val;
    this.fetchData();
  },
  handleSizeChange(val) {
    this.pageSize = val;
    this.fetchData();
  }
}

初始化加载

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

mounted() {
  this.fetchData();
}

完整组件示例

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

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      tableData: [],
      loading: false
    }
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const res = await axios.get('/api/data', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        });
        this.tableData = res.data.list;
        this.totalItems = res.data.total;
      } finally {
        this.loading = false;
      }
    },
    handlePageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

后端 API 要求

后端接口需要支持以下参数：

page: 当前页码

size: 每页数据量返回格式建议：

{
"list": [...],  // 当前页数据数组
"total": 100    // 总数据量
}

自定义样式

可以通过 CSS 调整分页组件样式：

.el-pagination {
  margin-top: 20px;
  text-align: right;
}

注意事项

确保在页码/页数变更时重置当前页码为1
添加防抖处理高频操作
处理网络请求错误情况
在路由变化时保持分页状态可以考虑使用 vuex 或 localStorage

标签: 分页 vue

分享给朋友：

vue手动实现弹窗

实现弹窗组件的基本结构在Vue中手动实现弹窗组件，需要创建一个独立的弹窗组件，并通过props控制其显示与隐藏。弹窗组件通常包含遮罩层、内容区域和关闭按钮。 <template>…

vue异步组建实现原理

Vue 异步组件实现原理 Vue 的异步组件允许将组件按需加载，通常用于代码分割或延迟加载非关键组件。其核心原理基于 Promise 和动态导入。基本实现方式通过 defineAsyncComp…

实现vue

安装Vue.js 通过npm安装Vue.js是最常见的方式。确保已安装Node.js和npm，运行以下命令： npm install vue 或者使用CDN直接引入： <script src…

vue实现骰子

Vue 实现骰子功能创建 Vue 组件在 Vue 项目中创建一个骰子组件，例如 Dice.vue。该组件包含骰子的外观和逻辑。 <template> <div class=…

vue nexttick实现

Vue 中 nextTick 的实现原理 Vue 的 nextTick 是一个用于在下次 DOM 更新循环结束之后执行延迟回调的方法。它的核心实现依赖于 JavaScript 的事件循环机制。基本…

vue 实现登录

Vue 实现登录功能创建登录表单组件在 Vue 项目中创建一个登录表单组件（如 Login.vue），包含用户名和密码输入框以及提交按钮。使用 v-model 实现双向数据绑定。 <tem…

使用vue实现分页查询