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

Dear 丶 2023-10-06 08:03 115阅读 0赞

#### 文章目录 ####

*  系列文章
 *  可分页表格组件
 *   *  功能列表
 *  使用案例
 *  相关代码
 *  在线演示

其实，这篇是总结帖。

## 系列文章 ##

*  [分页表格组件][Link 1]
 *  [动态列分页表格组件（动态控制表格列的显隐）][Link 2]
 *  [后端分页表格组件][Link 3]
 *  [终极分页表格组件（前/后端分页、动态列）][Link 4]

## 可分页表格组件 ##

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

### 功能列表 ###

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

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

## 使用案例 ##

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

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

## 相关代码 ##

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

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

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

## 在线演示 ##

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

--------------------

end

[Link 1]: https://blog.csdn.net/qq_31772441/article/details/105899043
[Link 2]: https://blog.csdn.net/qq_31772441/article/details/105901908
[Link 3]: https://blog.csdn.net/qq_31772441/article/details/105916370
[Link 4]: https://blog.csdn.net/qq_31772441/article/details/105918711
[Link 5]: https://gitee.com/markix/frontend-demo/tree/master/vue-components
[CodeSandbox]: https://blog.csdn.net/qq_31772441/article/details/105907144
[Link 6]: https://codesandbox.io/s/fenyebiaogezujian-7wuy1