当前位置：首页 > VUE

vue中实现分页

2026-03-30 13:05:13VUE

实现分页的基本思路

在Vue中实现分页通常需要结合后端API返回的分页数据和前端的分页组件。核心逻辑包括处理页码切换、数据请求和列表渲染。

后端API要求

后端API应支持分页参数，通常包含page（当前页）和pageSize（每页条数）字段。响应数据需包含分页信息，例如：

{
  "data": [...],
  "total": 100,
  "page": 1,
  "pageSize": 10
}

前端分页组件实现

安装常用分页组件库（如element-ui的el-pagination）：

npm install element-ui

模板中使用分页组件：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

数据请求与状态管理

在Vue组件中定义分页数据和请求方法：

export default {
  data() {
    return {
      list: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    fetchData() {
      const { page, pageSize } = this.pagination
      axios.get('/api/list', { params: { page, pageSize } })
        .then(res => {
          this.list = res.data.data
          this.pagination.total = res.data.total
        })
    },
    handlePageChange(page) {
      this.pagination.page = page
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}

自定义分页组件

如需自定义分页组件，可参考以下结构：

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

<script>
export default {
  props: {
    currentPage: Number,
    pageSize: Number,
    total: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    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-change', page)
      }
    }
  }
}
</script>

分页性能优化

对于大数据量分页，可采用虚拟滚动技术。安装vue-virtual-scroller：

npm install vue-virtual-scroller

使用示例：

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

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller }
}
</script>

分页与路由结合

将分页状态同步到URL路由：

vue中实现分页

watch: {
  '$route.query.page'(val) {
    this.pagination.page = Number(val) || 1
    this.fetchData()
  }
},
methods: {
  handlePageChange(page) {
    this.$router.push({
      query: { ...this.$route.query, page }
    })
  }
}