当前位置：首页 > VUE

vue实现翻页

2026-01-13 04:39:23VUE

Vue实现翻页功能

翻页功能通常结合后端API分页数据实现，以下是基于Vue 2或Vue 3的实现方案：

基础数据准备

需要定义当前页码、每页条数、总数据量等核心变量：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    listData: []
  }
}

分页请求方法

通过API获取分页数据，通常需要传递页码和每页条数参数：

vue实现翻页

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.listData = response.data.items
      this.totalItems = response.data.total
    })
  }
}

分页组件使用

推荐使用成熟的分页组件库，如element-ui的el-pagination：

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

页码变更处理

当用户切换页码时触发数据重新加载：

vue实现翻页

methods: {
  handlePageChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

前端本地分页

如果数据已全部加载到前端，可使用计算属性实现本地分页：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.allData.slice(start, end)
  }
}

自定义分页组件

如需完全自定义分页UI，可参考以下结构：

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

  <span v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
        :class="{ active: currentPage === page }">
    {{ page }}
  </span>

  <button 
    :disabled="currentPage >= totalPages" 
    @click="currentPage++">
    下一页
  </button>
</div>