# cb-form

**Repository Path**: coderback/cb-form

## Basic Information

- **Project Name**: cb-form
- **Description**: DynamicForm是一个前端form表单页面的解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element) 实现。他可以帮助开发人员快速开发完成表单的开发，适用于列表查询条件的form、列表增改form和流程审批界面的表单展示。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-07-15
- **Last Updated**: 2025-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    DynamicForm
</p>
<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.11-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.13.0-brightgreen.svg" alt="element-ui">
  </a>
</p>

## 简介

DynamicForm是一个前端form表单页面的解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element) 实现。他可以帮助开发人员快速开发完成表单的开发，适用于列表查询条件的form、列表增改form和流程审批界面的表单展示。

## 功能

```
1.根据配置文件动态生成表单控件。（支持控件：单选、多选、时间、radio、输入框、密码框、级联、以及自定义控件）
2.通过配置控制按钮个数。
3.通过配置控制按钮名称。
4.通过配置控制表单单行显示控件个数。
5.通过配置控制表达单个控件显示列数。
6.根据表单是增加或修改功能，控制表单主键字段显隐。
7.通过配置控制单选、多选等控件下拉数据获取方式。
8.通过配置控制表单元素验证规则。
9.对于系统内部统一的验证规则可以内置，全局统一验证规则。
```
## 接口
### 表单参数

| 参数         | 说明                                                         | 类型                       | 可选值       | 默认值 |
| ------------ | ------------------------------------------------------------ | -------------------------- | ------------ | ------ |
| formConfig   | 表单参数                                                     | Object                     |              |        |
| formData     | 表单数据，通过formData[item唯一标识]赋值、获取表单数据       | Object                     |              | {}     |
| isUpdate     | 是否是更新表单功能（增、改表单时使用）                       | Number                     | 0/1  1是更新 | 0      |
| submit       | 表达提交函数，通过formData[item唯一标识]或者通过入参json获取表单数据 | Function(json: string)     |              |        |
| getOptionFun | 获取表单item的Option函数                                     | Function(tranCode: string) |              |        |
| getRulesFun  | 获取表单item的Rules函数                                      | Function(ruleName: string) |              |        |

##### 表单formConfig参数

|    参数    | 说明                                                         | 类型         | 可选值        | 默认值                                                 |
| :--------: | ------------------------------------------------------------ | ------------ | ------------- | ------------------------------------------------------ |
|   _style   | 表单样式                                                     | Object       | {"columns":1} | {"columns":1,"submitButtonName":"提交","width":"auto"} |
|   _items   | 表单项数组,表述表单所有item项                                | Array\<item> |               |                                                        |
|   _rules   | 表单验证规则，与element的Form中rules相同                     | Object       | null          |                                                        |
| _rulesName | 表单验证规则函数名字，{"item唯一标识":"规则函数名称"，"item唯一标识":"规则函数名称"} | Object       | null          |                                                        |

##### _style参数

| 参数             | 说明             | 类型   | 可选值 | 默认值 |
| ---------------- | ---------------- | ------ | ------ | ------ |
| columns          | 表单显示列数     | Number | 1      | 1      |
| submitButtonName | 表单确认钮名称   | String | 提交   | 提交   |
| width            | 表单里的item宽度 | String | 225    | auto   |

##### item参数

| 参数     | 说明                       | 类型           | 可选值                                                       | 默认值 |
| -------- | -------------------------- | -------------- | ------------------------------------------------------------ | ------ |
| key      | item的唯一标识             | String         | ---                                                          |        |
| text     | item的label名称            | String         | ---                                                          |        |
| type     | item的类型                 | String         | input/password/cascader/datetime/select/multiple/radio/checkbox |        |
| tranCode | item所需Option的获取功能号 | String         | ---                                                          |        |
| options  | item所需Option数据         | Array\<opiton> | ----                                                         |        |
| isKey    | 表单里更新时是否要显示     | Number         | 0\1 0显示，1不显示                                           | 0      |