当前位置：首页 > VUE

vue实现列表分页

2026-03-29 00:42:01VUE

Vue 列表分页实现方法

使用计算属性分页

通过计算属性动态计算当前页数据，结合 v-for 渲染分页内容：

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>

分页导航组件

实现分页按钮控制逻辑：

methods: {
  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page
    }
  }
}

模板部分：

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

使用第三方库

对于复杂分页需求，可以使用现成的分页组件：

安装 vuejs-paginate：

npm install vuejs-paginate

使用示例：

import Paginate from 'vuejs-paginate'

export default {
  components: { Paginate },
  methods: {
    handlePageClick(data) {
      this.currentPage = data
    }
  }
}

模板部分：

<paginate
  :page-count="totalPages"
  :click-handler="handlePageClick"
  :prev-text="'<'"
  :next-text="'>'"
  :container-class="'pagination'"
  :page-class="'page-item'">
</paginate>

样式优化

为分页组件添加基础样式：

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.page-item {
  margin: 0 5px;
  cursor: pointer;
}

.active {
  font-weight: bold;
  color: #42b983;
}

动态调整每页数量

添加每页显示数量选择功能：

data() {
  return {
    pageSizeOptions: [5, 10, 20, 50]
  }
}

模板部分：

<select v-model="itemsPerPage" @change="currentPage = 1">
  <option v-for="size in pageSizeOptions" :value="size">{{ size }}条/页</option>
</select>

性能优化

对于大数据量场景，考虑虚拟滚动或懒加载技术：

// 使用vue-virtual-scroller
import { RecycleScroller } from 'vue-virtual-scroller'

components: {
  RecycleScroller
}

模板部分：

vue实现列表分页

<RecycleScroller
  :items="paginatedItems"
  :item-size="50"
  key-field="id">
  <template v-slot="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecycleScroller>