# vue3-config-form 配置式表单 **Repository Path**: he-kairui/vue3-config-form ## Basic Information - **Project Name**: vue3-config-form 配置式表单 - **Description**: Vue3 + ElementPlus + TS 配置式表单 通过JSON渲染表单组件,针对项目业务封装通用逻辑,做一个优雅的程序员。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 8 - **Forks**: 3 - **Created**: 2024-01-22 - **Last Updated**: 2025-05-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, element-plus, TypeScript, vite, Pinia ## README # vue3-config-form
+
## 一、安装依赖与运行 ```bash yarn yarn dev ``` **注意:18以下node版本部分依赖可能安装失败** ## 二、项目介绍 Vue3 + ElementPlus + TS 配置式表单 通过JSON渲染表单组件,针对项目业务封装通用逻辑,做一个优雅的程序员。 整体布局 代码实现 ## 三、主要资源 #### 1、组件1 ConfigForm(配置式表单) **主要功能:** (1) 用JSON形式实现template式ElementPlus组件写法; (2) 便捷赋值; (3) 统一状态管理; **优点:** (1) 轻量代码,源数据清晰; (2) 继承原生,低学习成本; (3) 可二次封装,业务针对性更强; (4) 极大程度减少重复冗余代码,更易维护; (5) 对element-plus表单组件的完全兼容。 ConfigForm示例 ConfigForm示例 #### 2、组件2 ConfigTableForm(配置式表格表单) **主要功能:** (1) ConfigFrom的表格版,以表格形式操作表单; (2) 其余特性同ConfigFrom; **优点:** (1) 整合ElementPlus原生功能,继承功能的前提下提升开发效率。 ConfigTableForm示例 ConfigTableForm示例 #### 3、组件3 PopupSelect(弹框选择器) **主要功能:** 1、从接口获取数据,渲染到列表,进行选择; **优点:** 1、比传统el-select展示数据更多; 2、支持自定义筛选条件和分页查询; 3、支持单选和多选,选择状态可回显。 PopupSelect PopupSelect示例 ## 四、重要说明 **以上组件皆位于src/components目录下,按需取用即可** **master分支是标准版,功能已定性,后续仅进行缺陷修复等内容更新** **master-plus分支为功能增强版,由于标准版宗旨是“不改变原生api,完全兼容和继承原生功能”,所以相比标准版,这里增加 增强版校验 和 表格式表单分页 功能** | | master | master-plus | master-easy | |:------------------------------------------:|:--------------------------------:|:--------------------:|:------------------------------------------------------------:| | 分支代号 | 标准版 | 增强版 | 演示版 | | 说明 | 包含基本功能,宗旨是“不改变原生api,完全兼容和继承原生功能” | 对表单常用业务二次封装,符合更多开发场景 | 原理Demo,[掘金文章地址](https://juejin.cn/post/7424028482374172682) | | `基于ElementPlus的主要功能` | ✅ | ✅ | ❌ | | `内置校验方法` | ❌ | ✅ | ❌ | | `ConfigTableForm分页` | ❌ | ✅ | ❌ |
欢迎社区朋友进行补充与共建 gitee地址 `https://gitee.com/he-kairui/vue3-config-form.git` 文档地址 `http://1.94.130.62/` 预览地址 `http://1.94.130.62:81/`