当前位置：首页 > VUE

vue实现分页教程

2026-01-18 15:57:39VUE

Vue 分页实现方法

基础分页组件实现

创建一个简单的分页组件，包含页码按钮、上一页和下一页按钮。使用 v-for 循环生成页码，并通过 v-model 绑定当前页。

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

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

<style>
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

与数据列表结合使用

在父组件中引入分页组件，并通过计算属性实现数据分页。

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <Pagination 
      :total-items="items.length" 
      :items-per-page="itemsPerPage"
      @page-changed="handlePageChange"
    />
  </div>
</template>

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

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...更多数据
      ],
      itemsPerPage: 5,
      currentPage: 1,
    };
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

优化分页显示

对于大量页码的情况，可以只显示当前页附近的几个页码，并用省略号表示其他页码。

// 在分页组件的 computed 中替换 pages 方法
pages() {
  const range = [];
  const maxVisible = 5; // 最多显示的页码数
  let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
  let end = Math.min(this.totalPages, start + maxVisible - 1);

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

  for (let i = start; i <= end; i++) {
    range.push(i);
  }

  if (start > 1) {
    range.unshift('...');
    range.unshift(1);
  }

  if (end < this.totalPages) {
    range.push('...');
    range.push(this.totalPages);
  }

  return range;
},

与后端API结合

当数据量很大时，通常需要后端分页。通过 AJAX 请求获取分页数据。

methods: {
  fetchData(page) {
    axios.get(`/api/items?page=${page}&per_page=${this.itemsPerPage}`)
      .then(response => {
        this.items = response.data.items;
        this.totalItems = response.data.total;
      });
  },
  handlePageChange(page) {
    this.currentPage = page;
    this.fetchData(page);
  },
},
created() {
  this.fetchData(1);
},

使用第三方库

对于更复杂的需求，可以使用现成的分页库如 vuejs-paginate。

安装：

npm install vuejs-paginate

使用：

<template>
  <paginate
    :page-count="totalPages"
    :click-handler="handlePageChange"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
  />
</template>

<script>
import Paginate from 'vuejs-paginate';

export default {
  components: {
    Paginate,
  },
  // ...其他代码
};
</script>

vue实现分页教程