当前位置：首页 > VUE

vue分页实现原理

2026-03-29 06:06:34VUE

Vue 分页实现原理

Vue 分页的核心是通过计算分页数据、动态渲染页码按钮，并与数据列表联动。以下是关键实现原理和步骤：

分页数据计算

分页需要计算总页数、当前页数据范围等。假设每页显示 pageSize 条数据，总数据量为 total，总页数公式为： $$ totalPages = Math.ceil(total / pageSize) $$ 当前页的数据范围可通过数组切片实现：

vue分页实现原理

const currentData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);

动态页码生成

根据当前页和总页数生成页码按钮，通常显示当前页前后几页的按钮。例如：

vue分页实现原理

function generatePageNumbers(currentPage, totalPages) {
  const range = 2; // 显示前后2页
  let start = Math.max(1, currentPage - range);
  let end = Math.min(totalPages, currentPage + range);
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

组件化实现

Vue 分页通常封装为可复用组件，通过 props 接收外部参数（如 total、pageSize），通过 emits 通知父组件页码变化：

<template>
  <div class="pagination">
    <button @click="handlePageChange(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
    <button 
      v-for="page in pageNumbers" 
      :key="page"
      @click="handlePageChange(page)"
      :class="{ active: page === currentPage }"
    >
      {{ page }}
    </button>
    <button @click="handlePageChange(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: ['total', 'pageSize', 'currentPage'],
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    pageNumbers() {
      // 调用上述 generatePageNumbers 方法
    }
  },
  methods: {
    handlePageChange(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-change', page);
      }
    }
  }
};
</script>

数据联动

父组件监听分页事件，更新当前页数据：

<template>
  <div>
    <data-list :data="currentData" />
    <pagination 
      :total="data.length" 
      :page-size="pageSize"
      :current-page="currentPage"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 原始数据
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    currentData() {
      return this.data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>