当前位置：首页 > VUE

vue前端实现伪分页

2026-01-23 11:07:31VUE

Vue 前端实现伪分页的方法

伪分页（前端分页）适用于数据量较小的情况，通过一次性加载所有数据后在前端进行分页展示。以下是实现步骤：

使用计算属性分割数据

在 Vue 组件中定义计算属性，根据当前页码和每页条数对完整数据进行切片：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.allData.slice(start, end);
  }
}

维护分页状态

在 data 中定义分页相关变量：

data() {
  return {
    allData: [], // 完整数据集
    currentPage: 1,
    pageSize: 10,
    totalItems: 0
  }
}

实现分页导航

模板部分可添加分页控件（以 Element UI 为例）：

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

处理数据加载

在 mounted 或数据获取方法中初始化数据：

async fetchData() {
  const res = await api.getData(); // 获取完整数据
  this.allData = res.data;
  this.totalItems = res.data.length;
}

替代方案：使用第三方库

如需快速实现，可考虑以下库：

vue-paginate：轻量级分页插件
v-pagination：纯 Vue 分页组件
laravel-vue-pagination：适用于 Laravel 后端风格

性能优化建议

对于大数据量（> 1000条）：

vue前端实现伪分页

添加虚拟滚动（如 vue-virtual-scroller）
实现懒加载分页（分批请求数据）
使用 Web Worker 处理数据分割

完整示例代码

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    totalItems() {
      return this.allData.length
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.allData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>