vue实现分页查询
Vue 实现分页查询
基本思路
在 Vue 中实现分页查询通常需要结合后端 API 和前端组件。核心逻辑包括：
- 通过 API 获取分页数据
- 处理分页参数（当前页、每页条数）
- 渲染分页控件
- 监听页码变化事件
实现步骤
安装依赖（可选）
如果需要使用现成的分页组件，可以安装 element-ui 或 vant 等 UI 库：
npm install element-ui基础实现代码
<template>
<div>
<!-- 数据表格 -->
<table>
<tr v-for="item in list" :key="item.id">
<td>{{ item.name }}</td>
</tr>
</table>
<!-- 分页控件 -->
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>当前页: {{ currentPage }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
currentPage: 1,
pageSize: 10,
total: 0
}
},
computed: {
totalPages() {
return Math.ceil(this.total / this.pageSize)
}
},
methods: {
async fetchData() {
const res = await axios.get('/api/data', {
params: {
page: this.currentPage,
size: this.pageSize
}
})
this.list = res.data.list
this.total = res.data.total
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--
this.fetchData()
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++
this.fetchData()
}
}
},
mounted() {
this.fetchData()
}
}
</script>使用 Element UI 分页组件
如果使用 Element UI，可以简化分页控件实现：
<template>
<div>
<el-table :data="list">
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handlePageChange(page) {
this.currentPage = page
this.fetchData()
}
}
}
</script>后端 API 要求
后端接口通常需要支持以下参数：
page: 当前页码size: 每页条数 并返回格式如：{ "list": [...], "total": 100 }
优化建议
- 添加加载状态指示
- 实现页码跳转功能
- 支持每页条数动态调整
- 添加防抖处理频繁请求
注意事项
- 确保分页参数正确传递给后端
- 处理无数据情况
- 考虑大数据量时的性能优化
