tp-form: 前端开发无可避免要遇到表单设计的问题，特别是一些和流程、报表、统计相关的需求时，可动态自定义设计的表单尤为重要。此表单设计器采用的是Vue,ElementUI为大框架技术，还用到了Vue.draggable,vue-json-viewer,lodash等

1月18日，北京，聊聊2025如何加入技术开发？

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

新增ID自定义 5bc423a

babel.config.js

package-lock.json

Loading...

README

# tp-form
前端开发无可避免要遇到表单设计的问题，特别是一些和流程、报表、统计相关的需求时，可动态自定义设计的表单尤为重要。这样就能根据当前需求，设计出最符合的表单，用来收集数据。现在介绍一下摸索出来的表单设计器，采用的是Vue,ElementUI为大框架技术，还用到了Vue.draggable,vue-json-viewer,lodash等。

### 主题内容
- 表单设计器`<MakeFormLayout></MakeFormLayout>`
- 表单显示器`<TpForm></TpForm>`

本表单设计器主要包括以上两项内容，`MakeFormLayout`组件的作用是用于显示设计界面给用户，用户可以通过该组件自定义设计表单。而`TpForm`组件则是用于展示作用，将用户自定义设计的表单展示出来供其他用户填写。

### 特点
- 支持可视化设计
- 支持修改时的实时预览
- 支持ID自定义
- 支持表单校验
- 自定义正则校验
- 表单栅格化布局
- 支持数据远程获取
- 可拓展性非常强，只需在固定位置创建文件即可立即拓展

### 支持组件
主要分为以下几个类型组件：
#### 输入型组件
- 单行文本
- 多行文本
- 密码输入
- 手机号输入 

#### 选择型组件
- 单项选择框（支持数据远程获取）
- 多项选择框（支持数据远程获取）
- 下拉选择框（支持数据远程获取）
- 时间选择
- 时间范围选择
- 日期选择
- 日期范围选择

#### 按钮型组件
- 开关
- 评分
- 计数器

#### 布局型组件
- 链接
- 分割线

### 项目命令
```
npm install
npm run serve
```

### 演示地址
[跳转到演示地址](//underline.gitee.io/tp-form)

前端开发无可避免要遇到表单设计的问题，特别是一些和流程、报表、统计相关的需求时，可动态自定义设计的表单尤为重要。此表单设计器采用的是Vue,ElementUI为大框架技术，还用到了Vue.draggable,vue-json-viewer,lodash等

https://underline.gitee.io/tp-form

JavaScript 等 4 种语言

取消

暂无发行版

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/jaimor/tp-form.git

git@gitee.com:jaimor/tp-form.git

jaimor

tp-form

tp-form

master