当前位置：首页 > VUE

vue 实现前端分页

2026-02-19 02:55:16VUE

实现前端分页的方法

在Vue中实现前端分页通常涉及数据分割、页码计算和动态渲染。以下是几种常见的方法：

使用计算属性分割数据

通过计算属性对原始数据进行分片处理，结合当前页码和每页条数动态返回对应数据。

data() {
  return {
    currentPage: 1,
    itemsPerPage: 10,
    allItems: [] // 原始数据
  }
},
computed: {
  paginatedItems() {
    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)
  }
}

使用第三方库

借助现成的分页组件库如element-ui或v-pagination快速实现：

// 使用element-ui示例
<template>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="currentPage"
    :page-size="itemsPerPage"
    :total="totalItems">
  </el-pagination>
</template>

自定义分页组件

创建可复用的分页组件，通过props接收总数据量，通过emit事件传递页码变化：

// Pagination.vue组件
props: ['totalItems', 'itemsPerPage'],
methods: {
  changePage(page) {
    this.$emit('page-changed', page)
  }
}

结合Vuex管理状态

在大型应用中通过Vuex集中管理分页状态：

// store.js
state: {
  pagination: {
    currentPage: 1,
    itemsPerPage: 10
  }
},
mutations: {
  SET_CURRENT_PAGE(state, page) {
    state.pagination.currentPage = page
  }
}

性能优化建议

对于大数据量考虑虚拟滚动技术替代传统分页使用防抖处理页码快速切换时的性能问题在分页变化时添加加载状态提升用户体验

vue 实现前端分页

完整示例代码

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button 
      v-for="page in totalPages" 
      :key="page"
      @click="currentPage = page"
      :disabled="currentPage === page">
      {{ page }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      allItems: [
        {id: 1, name: 'Item 1'},
        // ...更多数据
      ]
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.allItems.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.allItems.length / this.itemsPerPage)
    }
  }
}
</script>