当前位置：首页 > VUE

vue实现分页功能

2026-02-25 14:33:56VUE

实现基础分页功能

在Vue中实现分页功能通常需要结合后端API和前端组件。以下是一个基础实现方案：

数据准备 定义分页相关数据属性：

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

获取分页数据 创建获取数据的方法，通常通过API调用：

methods: {
fetchData() {
 const params = {
   page: this.currentPage,
   size: this.pageSize
 }

 axios.get('/api/items', { params })
   .then(response => {
     this.items = response.data.items
     this.totalItems = response.data.total
   })
}
}

分页组件使用 在模板中使用分页组件（如Element UI的Pagination）：

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

客户端分页实现

对于少量数据，可以在前端实现分页：

计算属性分页

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

自定义分页组件 创建简单的分页控件：


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

第 {{ currentPage }} 页

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

```

高级分页功能

页面大小选择 添加每页显示条数选择：

<select v-model="pageSize" @change="fetchData">
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="50">50条/页</option>
</select>

分页样式优化 添加CSS样式美化分页组件：


.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}

.pagination button { margin: 0 5px; padding: 5px 10px; }


3. 路由集成
将当前页码同步到URL路由：
```javascript
watch: {
  currentPage(newVal) {
    this.$router.push({
      query: { ...this.$route.query, page: newVal }
    })
  }
}

性能优化建议

防抖处理 对页码变化添加防抖，避免频繁请求：
```
import { debounce } from 'lodash'
```

methods: { handlePageChange: debounce(function(page) { this.currentPage = page this.fetchData() }, 300) }


2. 缓存策略
实现数据缓存减少请求次数：
```javascript
data() {
  return {
    pageCache: {}
  }
},

methods: {
  fetchData() {
    if (this.pageCache[this.currentPage]) {
      this.items = this.pageCache[this.currentPage]
      return
    }

    // 正常请求数据...
  }
}

以上实现方案可根据具体项目需求进行调整，核心思路是通过控制当前页码和每页显示数量来实现数据的分段展示。

vue实现分页功能