<el-pagination
background
layout="total, prev, pager, next, jumper"
:total="total"
:page-size="queryParams.pageSize"
:current-page="queryParams.pageNo"
@current-change="handlePageChange"
class="pagination"
></el-pagination>
/** 页码变化处理 */
handlePageChange(val) {
this.queryParams.pageNo = val;
this.getList();
},
前端电脑端架构师
思考过程
# Element-UI el-pagination 分页组件标准使用方法
## 核心配置
```
<el-pagination
background
layout="total, prev, pager, next,
jumper"
:total="total"
<!-- 总记录数 -->
:page-size="queryParams.pageSize"
<!-- 每页条数 -->
:current-page="queryParams.
pageNo"<!-- 当前页码 -->
@current-change="handlePageChange"
<!-- 页码变化事件 -->
></el-pagination>
```
## 关键方法
```
data() {
return {
queryParams: {
pageNo: 1, // 当前页码，初始
值为1
pageSize: 10, // 每页条数
},
tableData: [], // 表格数据
total: 0, // 总记录数
}
},
methods: {
// 页码变化处理 - 核心方法
handlePageChange(val) {
this.queryParams.pageNo =
val; // 先更新页码
this.getList
(); // 再查询数据
},
// 获取列表数据
getList() {
api.getList(this.queryParams).
then(res => {
this.tableData = res.data.
list;
this.total = res.data.total;
});
}
}
```
## 重要原则
### ❌ 错误方式
```
<!-- 不推荐：v-model 与
@current-change 同时使用时，事件触发时
v-model 尚未更新 -->
<el-pagination
v-model="queryParams.pageNo"
@current-change="getList" <!--
getList 读取的是旧值 -->
></el-pagination>
```
### ✅ 正确方式
```
<!-- 推荐：显式绑定 + 手动更新 -->
<el-pagination
:current-page="queryParams.pageNo"
@current-change="handlePageChange"
></el-pagination>
```
## 完整数据流
```
用户点击页码
↓
触发 @current-change(val)
↓
handlePageChange(val) 更新
queryParams.pageNo
↓
调用 getList() 查询接口
↓
更新 tableData 和 total
↓
页面重新渲染
```
## 搜索/重置时的页码处理
```
// 搜索时重置页码为1
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
// 重置时恢复默认参数
resetQuery() {
this.queryParams = {
pageNo: 1,
pageSize: 10,
// 其他查询条件...
};
this.getList();
}
```
## 总结要点
1. 显式绑定优于 v-model ：避免事件触发时序问题
2. 先更新再查询 ：确保接口使用最新的分页参数
3. 初始值设置 ： pageNo 初始化为 1 ， pageSize 按需设置
4. 搜索重置 ：操作后务必重置页码为 1
5. 响应式更新 ：确保 queryParams 是响应式对象（在 data 中声明）
