当前位置：首页 > VUE

vue实现前端分页

2026-01-16 21:06:07VUE

实现前端分页的方法

在Vue中实现前端分页通常需要结合数据截取和分页组件。以下是常见的实现方式：

基础实现方案

数据准备 定义总数据数组和分页相关变量：

data() {
  return {
    allItems: [], // 所有数据
    currentPage: 1, // 当前页码
    itemsPerPage: 10, // 每页显示数量
    paginatedItems: [] // 分页后的数据
  }
}

计算分页数据 使用计算属性获取当前页数据：

vue实现前端分页

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.allItems.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.allItems.length / this.itemsPerPage)
  }
}

页码切换方法 添加页码切换方法：

methods: {
  changePage(page) {
    this.currentPage = page
  }
}

使用第三方组件库

Element UI分页 安装Element UI后使用其分页组件：

vue实现前端分页

<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="itemsPerPage"
    :total="allItems.length">
  </el-pagination>
</template>

<script>
methods: {
  handleCurrentChange(val) {
    this.currentPage = val
  }
}
</script>

Vuetify分页 使用Vuetify的分页组件：

<template>
  <v-pagination
    v-model="currentPage"
    :length="totalPages"
    :total-visible="7">
  </v-pagination>
</template>

性能优化方案

虚拟滚动分页 对于大数据量场景，建议使用虚拟滚动：

<template>
  <virtual-list :size="50" :remain="10">
    <div v-for="item in paginatedData" :key="item.id">
      {{ item.content }}
    </div>
  </virtual-list>
</template>

分页缓存 使用keep-alive缓存已加载页面：

<keep-alive>
  <component :is="currentPageComponent"></component>
</keep-alive>

完整示例代码

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>

    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="changePage(page)"
        :class="{ active: currentPage === page }">
        {{ page }}
      </button>
    </div>
  </div>
</template>

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

<style>
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>