# 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

<div align="center">
  <img src="https://cn.vuejs.org/logo.svg" width="50" alt="" />
  <span style="font-size: 30px; font-weight: 900; padding: 10px;">+</span>
  <img src="https://cn.element-plus.org/images/element-plus-logo.svg" width="200" alt="" />
</div>


## 一、安装依赖与运行

```bash
yarn
yarn dev
```

**注意：18以下node版本部分依赖可能安装失败**

## 二、项目介绍

Vue3 + ElementPlus + TS 配置式表单 通过JSON渲染表单组件，针对项目业务封装通用逻辑，做一个优雅的程序员。

<img src="./public/markdown/2-1.png" alt="整体布局" style="zoom:25%;" />
<img src="./public/markdown/2-2.png" alt="代码实现" style="zoom:25%;" />

## 三、主要资源

#### 1、组件1 ConfigForm（配置式表单）

**主要功能：**

(1) 用JSON形式实现template式ElementPlus组件写法；
(2) 便捷赋值；
(3) 统一状态管理；

**优点：**

(1) 轻量代码，源数据清晰；

(2) 继承原生，低学习成本；

(3) 可二次封装，业务针对性更强；

(4) 极大程度减少重复冗余代码，更易维护；

(5) 对element-plus表单组件的完全兼容。

<img src="./public/markdown/3-1.png" alt="ConfigForm示例" style="zoom:25%;" />

<img src="./public/markdown/3-2.png" alt="ConfigForm示例" style="zoom:25%;" />

#### 2、组件2 ConfigTableForm（配置式表格表单）

**主要功能：**

(1) ConfigFrom的表格版，以表格形式操作表单；

(2) 其余特性同ConfigFrom；

**优点：**

(1) 整合ElementPlus原生功能，继承功能的前提下提升开发效率。

<img src="./public/markdown/3-3.png" alt="ConfigTableForm示例" style="zoom:25%;" />

<img src="./public/markdown/3-4.png" alt="ConfigTableForm示例" style="zoom:25%;" />

#### 3、组件3 PopupSelect（弹框选择器）

**主要功能：**

1、从接口获取数据，渲染到列表，进行选择；

**优点：**

1、比传统el-select展示数据更多；

2、支持自定义筛选条件和分页查询；

3、支持单选和多选，选择状态可回显。

<img src="./public/markdown/3-5.png" alt="PopupSelect" style="zoom:25%;" />

<img src="./public/markdown/3-6.png" alt="PopupSelect示例" style="zoom:25%;" />

## 四、重要说明

**以上组件皆位于src/components目录下，按需取用即可**

**master分支是标准版，功能已定性，后续仅进行缺陷修复等内容更新**

**master-plus分支为功能增强版，由于标准版宗旨是“不改变原生api，完全兼容和继承原生功能”，所以相比标准版，这里增加 增强版校验 和 表格式表单分页 功能**

|                                            |          <b>master</b>           |    <b>master-plus</b> |                      <b>master-easy</b>                      |
|:------------------------------------------:|:--------------------------------:|:--------------------:|:------------------------------------------------------------:|
|                <b>分支代号</b>                 |               标准版                |         增强版          |                             演示版                              |
|                 <b>说明</b>                  | 包含基本功能，宗旨是“不改变原生api，完全兼容和继承原生功能” | 对表单常用业务二次封装，符合更多开发场景 | 原理Demo，[掘金文章地址](https://juejin.cn/post/7424028482374172682)  |
|     <nobr>`基于ElementPlus的主要功能`</nobr>      |                ✅                 |          ✅           |                              ❌                               |
|                  `内置校验方法`                  |                ❌                 |          ✅           |                              ❌                               |
|            `ConfigTableForm分页`             |                ❌                 |          ✅           |                              ❌                               |

<hr/>

欢迎社区朋友进行补充与共建

gitee地址 `https://gitee.com/he-kairui/vue3-config-form.git`

文档地址 `http://1.94.130.62/`

预览地址 `http://1.94.130.62:81/`