当前位置：首页 > VUE

vue实现假分页

2026-02-19 05:53:56VUE

Vue 实现假分页的方法

假分页（前端分页）适用于数据量较小的情况，通过一次性加载所有数据后在前端进行分页处理。以下是实现假分页的几种方法：

vue实现假分页

使用计算属性分页

通过计算属性对数据进行切片，结合 v-for 渲染分页内容：

data() {
  return {
    allData: [], // 所有数据
    currentPage: 1, // 当前页码
    pageSize: 10   // 每页条数
  };
},
computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.allData.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.allData.length / this.pageSize);
  }
}

模板部分示例

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="currentPage++" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

使用第三方库

若需快速实现分页功能，可引入轻量级库如 vue-paginate：

安装库：
```
npm install vue-paginate
```

注册组件：

import VuePaginate from 'vue-paginate';
Vue.use(VuePaginate);

使用示例：

<template>
<paginate
 :page-count="totalPages"
 :click-handler="changePage"
 :prev-text="'<'"
 :next-text="'>'"
/>
</template>

完整示例代码

export default {
  data() {
    return {
      allData: Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` })),
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.allData.slice(start, start + this.pageSize);
    },
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize);
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    }
  }
};