FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
帮助文档 | 源码下载
3.1.31 版本及近期主要更新了以下内容
- 高级版FormCreate表单设计器强势登场,让表单设计更简单
- 优化渲染逻辑, 提升表单性能
- 新增
api 增加 getRenderRule 方法, 获取组件的最终渲染规则
- 新增
api 增加 getRefRule 方法, 可以通过 name 字段获取规则
- 新增
api 增加 bus 属性, 可以监听和触发自定义事件
- 新增
api 增加 fetch 方法, 可以手动加载远程数据
- 新增
upload 回调参数中增加 linkField 字段,可以判断是由那个关联字段触发
- 新增
validate 自动注入 inject 字段,可以在自定义验证函数中拿到规则和api
- 新增 组件的
options配置中增加 onChange 回调,修改表单时触发
- 优化
reuqired 属性
- 优化 修改组件的
disabled 配置实现逻辑
- 新增
api增加Top字段, 获取最顶级表单的api
- 新增 组件增加
disabled配置,全局禁用表单组件
- 优化组件隐藏逻辑
- 优化
element-plus兼容性
- 优化 子表单基础表单配置
- 优化 计算属性
- 修复
options.beforeFetch 配置不生效问题
- 组件增加
title插槽,支持自定义表单的标签区域
- 修复
options.title 配置不生效问题
- 修复
options.beforeFetch 配置不生效问题
- 修复 ElementPlus兼容老版本
- 修复 Ts描述
Features🌟
- 重构
group组件, 重写样式,并增加序号和上下移动功能,增加sortBtn和parse参数
- 新增 api中新增
wrapEl和formEl方法,用于获取对应的vue组件实例
- 新增 formCreate新增
setData和removeData方法
ts
type setData = (name:string,value:any) =>void;
type removeData = (name:string)=>void;
js
//设置数据
formCreate.setData('address',[]);
js
//生成规则
{
type:'select',
options: [],
effect: {
loadData:{
attr:'address',
to:'options'
}
}
}
- 优化 fetch.parse 配置,支持配置字符串,指定路径,例如
props.options
安装
根据自己使用的 UI 安装对应的版本
element-ui
npm install @form-create/element-ui@next
ant-design-vue
npm install @form-create/ant-design-vue@next
arco-design
npm install @form-create/arco-design@next
naive-ui
npm install @form-create/naive-ui@next
tdesign
npm install @form-create/tdesign@next
引入
CDN:
element-plus
<link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
ant-design-vue
<link href="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/dayjs"></script>
<script src="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.js"></script>
<script src="https://unpkg.com/@form-create/ant-design-vue@next/dist/form-create.min.js"></script>
NodeJs:
element-plus ^2.0
import formCreate from '@form-create/element-ui'
app.use(formCreate)
element-plus (with unplugin-vue-components/vite & ElementPlusResolver)
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)
ant-design-vue ^3.0
import formCreate from '@form-create/ant-design-vue'
app.use(formCreate)
arco-design ^2.0
import formCreate from '@form-create/arco-design'
app.use(formCreate)
naive-ui ^2.0
import formCreate from '@form-create/naive-ui'
app.use(formCreate)
tdesign ^0.17.3
import formCreate from '@form-create/tdesign'
app.use(formCreate)
使用
可通过以下2种方式创建表单:
组件模式, 全局方法
组件模式
使用 <form-create></form-create> 标签创建表单
html
<div id="app">
<form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>
NodeJs
js
export default {
data() {
return {
//实例对象
fApi: {},
//表单数据
formData: {},
//表单生成规则
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
}
}
在 setup 中使用
vue
<template>
<FormCreate :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></FormCreate>
</template>
<script setup>
//导入 form-create
import formCreate from "@form-create/element-ui";
import {ref} from "vue";
//获取 formCreate 组件
const FormCreate = formCreate.$form();
const fApi = ref({});
const formData = ref({});
const options = ref({
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
});
const rule = ref([
{
type:'input',
field:'goods_name',
title:'商品名称',
value:'form-create'
},
{
type:'checkbox',
field:'label',
title:'标签',
value:[0,1,2,3],
options: [
{label:'好用',value:0},
{label:'快速',value:1},
{label:'高效',value:2},
{label:'全能',value:3},
]
},
]);
</script>
全局方法
使用 window 全局方法formCreate.create(rule,option)创建表单
html
<div id="app3">
<div id="form-create"></div>
</div>
js
//表单插入的节点
const root = document.getElementById('form-create')
const fApi = window.formCreate.create(
//表单生成规则
[
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
{
el: root,
//显示表单重置按钮
resetBtn: true,
//表单提交事件
onSubmit: function (formData) {
//按钮进入提交状态
fApi.btn.loading()
}
})
1. FormCreate官网：https://www.form-create.com
2. 帮助文档：https://pro.form-create.com/doc
3. 体验地址：https://pro.form-create.com/view
