当前位置：首页 > VUE

vue自己实现分页功能

2026-02-24 10:41:54VUE

Vue 实现分页功能

分页组件设计

创建一个独立的 Pagination.vue 组件，接收当前页码、总页数等参数，通过事件触发页码变更。以下是一个基础实现模板：

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1"
    >上一页</button>

    <span v-for="page in pages" :key="page">
      <button 
        @click="changePage(page)"
        :class="{ active: page === currentPage }"
      >{{ page }}</button>
    </span>

    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: { type: Number, required: true },
    totalPages: { type: Number, required: true },
    maxVisiblePages: { type: Number, default: 5 }
  },
  computed: {
    pages() {
      const range = [];
      const half = Math.floor(this.maxVisiblePages / 2);
      let start = Math.max(1, this.currentPage - half);
      let end = Math.min(this.totalPages, start + this.maxVisiblePages - 1);

      if (end - start + 1 < this.maxVisiblePages) {
        start = Math.max(1, end - this.maxVisiblePages + 1);
      }

      for (let i = start; i <= end; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-change', page);
      }
    }
  }
};
</script>

<style scoped>
.pagination { display: flex; gap: 5px; }
.active { background-color: #42b983; color: white; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
</style>

数据分页处理

在父组件中处理数据分页逻辑，通常结合 slice 方法实现：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <Pagination 
      :current-page="currentPage" 
      :total-pages="totalPages"
      @page-change="onPageChange"
    />
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: { Pagination },
  data() {
    return {
      allData: [], // 从API获取的完整数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.allData.slice(start, end);
    }
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page;
    },
    async fetchData() {
      this.allData = await api.getItems(); // 替换为实际API调用
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

后端分页集成

若数据量较大，建议采用后端分页（API支持分页参数）：

async fetchPaginatedData(page) {
  const response = await axios.get('/api/items', {
    params: {
      page,
      per_page: this.itemsPerPage
    }
  });
  this.paginatedData = response.data.items;
  this.totalPages = response.data.total_pages;
}

高级功能扩展

每页条数选择器：添加 select 元素动态修改 itemsPerPage
跳转输入框：添加输入框支持直接跳转到指定页码
省略号显示：当页码过多时用 ... 表示省略部分页码
移动端适配：简化分页控件在移动端的显示

<template>
  <div class="pagination-advanced">
    <select v-model="itemsPerPage" @change="resetPage">
      <option value="5">5条/页</option>
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
    </select>

    <input 
      type="number" 
      v-model.number="inputPage" 
      @keyup.enter="jumpPage"
      min="1" 
      :max="totalPages"
    >
    <button @click="jumpPage">跳转</button>
  </div>
</template>

<script>
export default {
  methods: {
    resetPage() {
      this.currentPage = 1;
      this.$emit('per-page-change', this.itemsPerPage);
    },
    jumpPage() {
      const page = Math.max(1, Math.min(this.inputPage, this.totalPages));
      this.changePage(page);
    }
  }
};
</script>