Vue3.5 + Element-Plus 二次封装 el-table、el-form、el-descriptions

超级组件 基于 Vue3.5 + Element-Plus 最新版二次封装了 el-table、el-form、el-descriptions 等常用组件，核心理念是通过「配置项（JSON）」来驱动页面的生成，无需编写大量的标签。

超级组件有如下组件：

在线预览

超级组件并不是作为单独的 NPM 包安装，而是作为独立组件运行在 Teek Design Vue3 项目里，因此可以在项目链接可以查看简单的 Demo 和预览超级组件的代码。

大家可以将超级组件复制到任意 Vue3 + Element-Plus 的项目里使用。

Teek Design Vue3 的文档链接里，超级组件有更详细的 Demo 示例和配置项说明。

超级组件最开始只有超级表格，而超级表格最初来源于掘金的一篇 Vue3.2 + Element-Plus 二次封装 el-table（Pro 版 🚀🚀），在评论区也可以看到我的评论（😊），后逐步完善，衍生了超级表单和超级搜索等组件。

当时超级组件仿照最初的超级表格，使用 tsx 编写，如今已经全部使用 setup 模板风格重构。

在重构的过程中，我参考了 plus-pro-components 的设计思路，添加了基于超级表单衍生的分组表单，弹框表单等组件。

这里仅列举常用的几个超级组件，更多的超级组件用法请看上方的在线预览链接。

超级组件分为 4 个模块：

通过传入 columns 和 data 即可快速构建一个表格：

效果：

传入配置项 columns 即可构建一个表单：

效果：

超级页面基于超级表格和超级搜索组成。超级页面的 columns 在超级表格的 columns 基础上额外添加了 search 配置项，其他用法与超级表格的 columns 保持一致。

效果：

传入配置项 columns 即可构建一个描述列表：

效果：

超级描述列表内置超级表单，可以通过传入 editable 来开启编辑功能。

超级弹框并没有对 el-dialog 过渡封装，仅仅添加了支持切换全屏的按钮。

超级组件的设计思路是：在完全不影响 ElementPlus 组件的所有属性、事件、插槽前提下进行拓展，你可以通过 columns 传入 ElementPlus 组件自带的任意功能。