当前位置：首页 > VUE

vue前端如何实现分页

2026-01-22 07:56:21VUE

vue前端实现分页的方法

使用Element UI的Pagination组件

Element UI提供了成熟的Pagination组件，适合快速集成。安装Element UI后，在模板中添加以下代码：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

在script部分定义相关数据和方法：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    list: []
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val
    this.fetchData()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  },
  fetchData() {
    // 调用API获取数据，传递currentPage和pageSize参数
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(res => {
      this.list = res.data.list
      this.total = res.data.total
    })
  }
}

手动实现分页逻辑

如果不使用UI库，可以手动实现分页功能。首先定义分页数据：

data() {
  return {
    currentPage: 1,
    itemsPerPage: 10,
    allItems: [],
    displayedItems: []
  }
}

创建计算属性来获取当前页数据：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.allItems.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.allItems.length / this.itemsPerPage)
  }
}

添加分页控制方法：

methods: {
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++
    }
  },
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
    }
  },
  goToPage(page) {
    this.currentPage = page
  }
}

在模板中实现分页导航：

<div v-for="item in paginatedItems" :key="item.id">
  <!-- 显示项目内容 -->
</div>

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

使用第三方分页库

对于更复杂的需求，可以考虑使用专门的分页库如vue-paginate。安装后可以快速实现分页功能：

import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

在模板中使用：

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

无限滚动分页

对于移动端或需要流畅体验的场景，可以实现无限滚动分页：

vue前端如何实现分页

data() {
  return {
    page: 1,
    loading: false,
    noMoreData: false
  }
},
methods: {
  handleScroll() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
      if (!this.loading && !this.noMoreData) {
        this.loadMore()
      }
    }
  },
  loadMore() {
    this.loading = true
    this.page++
    axios.get(`/api/data?page=${this.page}`).then(res => {
      if (res.data.length === 0) {
        this.noMoreData = true
      } else {
        this.items = [...this.items, ...res.data]
      }
      this.loading = false
    })
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}