当前位置：首页 > VUE

vue中分页的实现

2026-01-20 06:37:54VUE

分页组件实现

在Vue中实现分页功能通常需要结合后端API的分页数据返回和前端的分页组件展示。以下是常见的实现方法：

基础分页组件

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

    <span v-for="page in pageRange" :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: Number,
    totalPages: Number,
    maxVisible: {
      type: Number,
      default: 5
    }
  },
  computed: {
    pageRange() {
      const range = []
      const half = Math.floor(this.maxVisible / 2)
      let start = Math.max(1, this.currentPage - half)
      let end = Math.min(this.totalPages, start + this.maxVisible - 1)

      if (end - start + 1 < this.maxVisible) {
        start = Math.max(1, end - this.maxVisible + 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-changed', page)
      }
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  gap: 5px;
}
.active {
  background-color: #42b983;
  color: white;
}
</style>

结合API请求

在父组件中使用分页组件并与API交互：

vue中分页的实现

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页组件 -->
    <Pagination
      :current-page="currentPage"
      :total-pages="totalPages"
      @page-changed="fetchData"
    />
  </div>
</template>

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

export default {
  components: { Pagination },
  data() {
    return {
      items: [],
      currentPage: 1,
      totalPages: 1,
      pageSize: 10
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData(page = 1) {
      this.currentPage = page
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      this.items = response.data.items
      this.totalPages = Math.ceil(response.data.total / this.pageSize)
    }
  }
}
</script>

使用第三方库

对于快速实现，可以考虑使用现成的分页组件库：

安装Element UI分页组件：
```
npm install element-ui
```

使用示例：


<template>
<el-pagination
 @current-change="handleCurrentChange"
 :current-page="currentPage"
 :page-size="pageSize"
 :total="total"
 layout="prev, pager, next"
>
</el-pagination>
</template>

import { ElPagination } from 'element-ui'

export default { components: { ElPagination }, data() { return { currentPage: 1, pageSize: 10, total: 100 } }, methods: { handleCurrentChange(val) { this.currentPage = val this.fetchData() } } }

```

无限滚动分页

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

<template>
  <div class="infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false,
      hasMore: true
    }
  },
  methods: {
    async loadMore() {
      if (this.loading || !this.hasMore) return

      this.loading = true
      const response = await axios.get('/api/items', {
        params: { page: this.page }
      })

      this.items = [...this.items, ...response.data.items]
      this.page++
      this.hasMore = response.data.hasMore
      this.loading = false
    }
  }
}
</script>

这些方法覆盖了Vue中实现分页的主要场景，可以根据具体需求选择合适的实现方式。