基于element-ui的 终极分页表格组件（前/后端分页、动态列）

其实，这篇是总结帖。

系列文章

• 分页表格组件
• 动态列分页表格组件（动态控制表格列的显隐）
• 后端分页表格组件
• 终极分页表格组件（前/后端分页、动态列）

可分页表格组件

其实在第三篇文章（后端分页表格组件）的组件就已经是一个基本完善的分页表格组件了（自我感觉良好）。
下面列举下其功能：

功能列表

1. 兼容 <el-table> 和 <el-pagination> 原有属性设置
2. 分页功能开关
3. 支持前端分页
4. 支持分页参数的设置
5. 动态列功能开关
6. 支持动态列设置
7. 支持初始隐藏列的设置
8. 支持不可隐藏列的设置
9. 后端分页功能开关
10. 支持后端分页

相关功能点的设计思路在起前几篇文章都有提及，这里就不赘述了。

使用案例

详见源码，这里举几个能实现的例子：

1. 不分页
2. 不分页 + 动态列
3. 前端分页
4. 前端分页 + 动态列
5. 后端分页
6. 后端分页 + 动态列

相关代码

相关的代码托管在码云，必要的注释都注明在代码中。传送门走你：码云地址
src/view/PageTable 目录说明：

• frontendPaging：前端分页
• frontendPagingDynCol-v2：前端分页 + 动态列
• backendPaging-v2：后端分页
• backendPagingDynCol-v2：后端分页 + 动态列

v1版本是基于dom操作实现的动态列功能。
v2版本是基于 v-if 属性实现的动态列功能。
目录中的 PageTable.vue 为组件代码，另一个文件为使用案例。

在线演示

在线演示归功于前端在线编辑器“CodeSandbox”，它支持在线编辑及预览。此地址
有读者反馈codesandbox不太稳定，经常访问不了或者加载出错。保守推荐，直接拉仓库代码，本地跑吧。建议先跑起来使用案例看效果，再深入代码。

---

end