让表单设计更简单，一个全开源的表单设计神器

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据网络、验证和提交功能的表单生成组件。支持5个UI框架，而且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
强大的动态表单生成器，通过数据驱动表单渲染，支持可视化设计。提高开发者对表单的开发效率。现在在OA体系、ERP体系、电商体系、流程管理等体系中已稳定应用。
资助文档：https://www.form-create.com/v3/ 

安装


   根据自己利用的 UI 安装对应的版本
  element-ui

1. npm install @form-create/element-ui@next

复制代码

ant-design-vue

1. npm install @form-create/ant-design-vue@next

复制代码

arco-design

1. npm install @form-create/arco-design@next

复制代码

naive-ui

1. npm install @form-create/naive-ui@next

复制代码

tdesign

1. npm install @form-create/tdesign@next

复制代码

引入


CDN:
element-plus

1. <link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
2. <script src="https://unpkg.com/vue@next"></script>
3. <script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
4. <script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>

复制代码

ant-design-vue

1. <link href="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.css"></link>
2. <script src="https://unpkg.com/vue@next"></script>
3. <script src="https://unpkg.com/dayjs"></script>
4. <script src="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.js"></script>
5. <script src="https://unpkg.com/@form-create/ant-design-vue@next/dist/form-create.min.js"></script>

复制代码

NodeJs:
element-plus ^2.0

1. import formCreate from '@form-create/element-ui'
2. app.use(formCreate)

复制代码

element-plus (with unplugin-vue-components/vite & ElementPlusResolver)

1. import formCreate from '@form-create/element-ui'
2. import install from '@form-create/element-ui/auto-import'
3. formCreate.use(install)
4. app.use(formCreate)

复制代码

ant-design-vue ^3.0

1. import formCreate from '@form-create/ant-design-vue'
2. app.use(formCreate)

复制代码

arco-design ^2.0

1. import formCreate from '@form-create/arco-design'
2. app.use(formCreate)

复制代码

naive-ui ^2.0

1. import formCreate from '@form-create/naive-ui'
2. app.use(formCreate)

复制代码

tdesign ^0.17.3

1. import formCreate from '@form-create/tdesign'
2. app.use(formCreate)

复制代码

利用

1. <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value"/>

复制代码

1. export default {
2.     data(){
3.         return {
4.             fApi:{},
5.             value:{field1:'111',field2:'222',time:'11:11:11'},
6.             options:{
7.                 onSubmit:(formData)=>{
8.                     alert(JSON.stringify(formData))
9.                 }
10.             },
11.             rule:[
12.                 {type:'input', field:'field1',title:'field1',value:'aaa'},
13.                 {type:'input', field:'field2',title:'field2',value:'sss'},
14.                 {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
15.                 {
16.                     type:'ElButton',
17.                     title:'修改 field1',
18.                     native: false,
19.                     on:{
20.                         click: ()=>{
21.                             this.rule[0].value+='a'
22.                         }
23.                     },
24.                     children: ['点击'],
25.                 }
26.             ]
27.         }
28.     }
29. }

复制代码

示例


下载项目

1. $ git clone https://github.com/xaboy/form-create.git
2. $ cd form-create

复制代码

安装依赖

1. $ npm run bootstrap

复制代码

查看 element-ui 示例

1. $ npm run dev:ele

复制代码

查看 ant-design-vue 示例

1. $ npm run dev:antd

复制代码

FormCreate设计器Pro版一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。现在，在OA体系、ERP体系、电商体系、流程管理等体系中已稳定应用。

项目接纳Vue3.0 和 ElementPlus 进行页面构建，内置多语言办理方案，支持二次扩睁开发，支持自定义组件扩展。
项目分为设计器 form-create-designer 和 渲染器 form-create，用户可以通过可视化界面快速高效地创建表单，并输出为JSON。而且通过加载JSON，渲染器可以渲染并输出相应的表单。
 

• 版本对比
  

在开源版本的基础上，为了满意更多复杂场景和提供更好的优质服务推出了Pro版本。
开源版 vs Pro版
 

 传送门：
FormCreate官网：FormCreate-动态表单
资助文档：介绍 | FcDesigner Pro
体验所在：FcDesigner Pro在线演示
开源项目：xaboy (FormCreate) · GitHub
 项目QQ讨论群629709230 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。