vue 2 中 mixins 统一管理 el-table 分页：集中声明 pageparams 和 loading 状态，封装 handlesizechange、handlecurrentchange 等通用方法，提供 groupparams 参数组装及 loading 自动控制，子组件仅需实现 gettablelistdata。
在 Vue 2 中，用 mixins 统一管理 el-table 的分页查询、页码和加载状态，核心是把共性逻辑抽离为可复用的数据结构和方法，避免每个表格页面重复写 pageParams、loading、handleSizeChange 等代码。关键在于 mixin 提供初始化、参数组装、状态控制和事件响应的一整套闭环。
统一定义分页与加载状态字段
在 mixin 的 data 中集中声明：
-
pageParams：包含pageNum（当前页）、pageSize（每页条数）、total（总数）、pageSizes（可选尺寸数组） -
table.loading：布尔值，控制el-table的v-loading属性 - 所有参数默认值清晰，比如
pageNum: 1、pageSize: 10、loading: false
封装通用分页操作方法
让子组件只需调用方法，不关心内部实现：
-
handleSizeChange(size)：自动重置pageNum = 1，更新pageSize，再触发数据请求 -
handleCurrentChange(page)：仅更新pageNum，再触发请求 -
initPageParams()：一键清空页码并重置为第 1 页（常用于搜索/重置后） -
getTableListData()：作为“钩子方法”，由子组件自行实现具体 API 调用，mixin 只负责前置设置loading = true和后续loading = false
提供灵活的参数组装能力
不同页面可能有筛选条件、排序字段、额外参数等，mixin 提供 groupParams(dataArr) 方法：
- 支持传入字段名数组，如
["filterParams", "pageParams", "sortParams"] - 自动识别
pageParams并提取pageNum和pageSize，其他对象则直接合并 - 子组件调用时只需
this.$http.get(url, { params: this.groupParams() })，无需手动拼接
加载状态与生命周期联动
确保体验一致：
- 在
created或activated钩子中根据配置决定是否自动拉取第一页（配合createdIsNeed: true这类开关） - 每次请求前设
table.loading = true，响应后（无论成功失败）设为false - 错误时可统一提示（如
this.$message.error("加载失败")），子组件也可覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
