使用vue实现分页查询
使用 Vue 实现分页查询
核心组件与逻辑
分页查询通常需要结合后端 API 和前端组件实现。以下是一个基于 Vue 3 的完整实现方案：
数据准备与状态管理
在 Vue 组件中定义分页相关数据：
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
totalItems: 0, // 总数据量
tableData: [], // 当前页数据
loading: false // 加载状态
}
}分页请求方法
创建获取分页数据的方法：
methods: {
async fetchData() {
this.loading = true;
try {
const res = await axios.get('/api/data', {
params: {
page: this.currentPage,
size: this.pageSize
}
});
this.tableData = res.data.list;
this.totalItems = res.data.total;
} finally {
this.loading = false;
}
}
}分页组件集成
使用 Element UI 的分页组件（或其他 UI 库）：
<el-pagination
background
:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
layout="prev, pager, next, sizes, jumper"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>事件处理
实现分页相关事件处理：
methods: {
handlePageChange(val) {
this.currentPage = val;
this.fetchData();
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
}
}初始化加载
在 mounted 钩子中触发首次数据加载：
mounted() {
this.fetchData();
}完整组件示例
<template>
<div>
<el-table :data="tableData" v-loading="loading">
<!-- 表格列定义 -->
</el-table>
<el-pagination
background
:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
layout="prev, pager, next, sizes, jumper"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
totalItems: 0,
tableData: [],
loading: false
}
},
methods: {
async fetchData() {
this.loading = true;
try {
const res = await axios.get('/api/data', {
params: {
page: this.currentPage,
size: this.pageSize
}
});
this.tableData = res.data.list;
this.totalItems = res.data.total;
} finally {
this.loading = false;
}
},
handlePageChange(val) {
this.currentPage = val;
this.fetchData();
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
}
},
mounted() {
this.fetchData();
}
}
</script>后端 API 要求
后端接口需要支持以下参数：
page: 当前页码size: 每页数据量 返回格式建议：{ "list": [...], // 当前页数据数组 "total": 100 // 总数据量 }
自定义样式
可以通过 CSS 调整分页组件样式：
.el-pagination {
margin-top: 20px;
text-align: right;
}注意事项
- 确保在页码/页数变更时重置当前页码为1
- 添加防抖处理高频操作
- 处理网络请求错误情况
- 在路由变化时保持分页状态可以考虑使用 vuex 或 localStorage
