当前位置：首页 > VUE

vue如何实现分页

2026-03-30 07:25:02VUE

Vue 实现分页的方法

使用 `v-for` 和计算属性实现基础分页

在 Vue 中可以通过计算属性对数据进行分页处理。假设有一个数据列表 items，可以通过以下方式实现分页：

data() {
  return {
    items: [...], // 原始数据
    currentPage: 1,
    itemsPerPage: 10
  }
},
computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.items.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.items.length / this.itemsPerPage);
  }
}

在模板中使用分页数据：

<ul>
  <li v-for="item in paginatedItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

创建分页导航组件

可以创建一个独立的分页导航组件，用于切换页码：

<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: currentPage === page }"
      >
        {{ page }}
      </button>
    </span>
    <button 
      @click="changePage(currentPage + 1)"
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    totalPages: Number
  },
  computed: {
    pages() {
      const range = [];
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

结合后端 API 实现分页

对于大数据量场景，通常需要后端分页。可以通过 API 传递页码和每页数量：

methods: {
  async fetchData(page = 1) {
    const response = await axios.get('/api/items', {
      params: {
        page,
        per_page: this.itemsPerPage
      }
    });
    this.items = response.data.items;
    this.totalItems = response.data.total;
  },
  changePage(page) {
    this.currentPage = page;
    this.fetchData(page);
  }
}

使用第三方分页组件

Vue 生态中有许多成熟的分页组件可以直接使用：

vue-paginate: 轻量级分页组件
```
npm install vue-paginate
```

element-ui pagination: 如果你使用 Element UI

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="itemsPerPage"
  :total="totalItems">
</el-pagination>