vue实现列表分页
Vue实现列表分页的方法
使用计算属性实现分页
通过计算属性对原始数据进行切片处理，结合v-for渲染分页后的数据片段。需定义currentPage和pageSize两个响应式变量。
data() {
return {
items: [], // 原始数据
currentPage: 1,
pageSize: 10
}
},
computed: {
paginatedItems() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.items.slice(start, end)
}
}添加分页导航控件
在模板中添加页码切换按钮，通过方法修改currentPage值。可结合v-for动态生成页码按钮。
<button
v-for="page in totalPages"
@click="currentPage = page"
:class="{ active: currentPage === page }"
>
{{ page }}
</button>computed: {
totalPages() {
return Math.ceil(this.items.length / this.pageSize)
}
}使用第三方库（推荐）
对于复杂场景，可使用专门的分页组件库：
- Element UI：
<el-pagination>组件<el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems" @current-change="handlePageChange" /> - Vuetify：
<v-pagination>组件 - Bootstrap-Vue：
<b-pagination>组件
服务器端分页处理
当数据量极大时，应结合API实现服务端分页：
async fetchData() {
const res = await axios.get('/api/items', {
params: {
page: this.currentPage,
size: this.pageSize
}
})
this.items = res.data.items
this.totalItems = res.data.totalCount
}分页样式优化
- 添加过渡动画增强用户体验
<transition-group name="fade"> <div v-for="item in paginatedItems" :key="item.id"> {{ item.name }} </div> </transition-group> - 实现页码跳转输入框
- 添加每页条数选择器
注意事项
- 分页组件应始终显示在列表下方或固定位置
- 当数据为空时显示友好提示
- 在切换页码时考虑加载状态的显示
- 移动端需优化分页控件的触摸区域
