form-create 接入 Arco Design：基于 JSON 驱动的低代码动态表单组件实战指南-北京尧图网络

低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载form-create/arco-design是 form-create 低代码动态表单体系针对Arco DesignVue 3打造的适配版本包它让开发者只需编写一份 JSON 规则即可渲染出具备动态渲染、数据收集、校验与提交能力的完整表单。本指南以 packages/arco-design/README.md 为骨架结合本仓库源码完整讲解该包的定位、特性、包体结构、安装接入、默认配置、规则编写、内置组件与核心 API读完即可在 Arco Design 项目中落地一套可维护、可扩展的 JSON 驱动表单方案。一、包定位基于 Arco Design 的低代码表单生成组件form-create/arco-design的核心定位是让表单不再是一行行手写的模板代码而是一份可被任意程序生成、传递、持久化的 JSON 数据。正如其 README 所描述的FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件而本包就是这套机制在 Arco Design 组件库上的具体实现。从源码结构看该包的组装入口在 packages/arco-design/src/core/index.js 的install函数中完成四件事通过FormCreate.componentAlias(alias)注册 Arco Design 组件别名见下文组件别名映射逐个注册扩展组件上传、子表单、分组、单选、复选、frame 等注册规则解析器parsers让 JSON 规则能被正确翻译为 Arco 组件注册表单管理扩展required校验提供器与全套 maker 快捷生成器。因此使用时不需要感知底层渲染细节只需关心规则怎么写与数据怎么取。二、核心特性依据 README该包继承了 form-create 的完整能力矩阵JSON 数据生成表单表单结构、校验规则、组件 props 全部由 JSON 规则描述可动态下发、动态变更支持扩展除了内置组件还可以生成任意 Vue 组件与 HTML 标签例如示例中直接用maker.create(a-button)生成 Arco 按钮或注册wangEditor富文本组件见 packages/arco-design/examples/main.js支持 8 个 UI 框架element-plus、ant-design-vue、arco-design、naive-ui、tdesign、iview、view-design、vant 均有对应适配包可在不同技术栈间复用同一套规则结构支持组件联动通过规则的control值联动与effect字段联动配置一个字段的变化可以驱动其他字段的显隐、取值与状态提供丰富的表单操作 APIsubmit、validate、append、prepend、hidden、disabled、setValue、getValue等数十个方法详见下文 API 章节支持子表单与分组subForm对象/子表单与group批量数组两个高级容器组件可嵌套任意规则高性能规则变更时仅做局部渲染更新适配移动端可配合 vant 等移动端包同一套 JSON 规则跨端复用多语言内置多语言机制例如 required 校验失败提示会按当前语言输出源码见 packages/arco-design/src/core/provider.js。三、包说明与版本分支3.1 form-create 生态包一览READM E 的包说明一节给出了完整的包矩阵。以 Vue 3 分支next为例与 Arco Design 同属UI 框架适配包的有包名说明form-create/element-uiElement Plus 版本form-create/ant-design-vueAnt Design Vue 版本form-create/arco-designArco Design 版本本文主题form-create/naive-uiNaive UI 版本form-create/tdesignTDesign 版本form-create/vantVant 版本移动端另有面向 Vue 2 的 form-create/iview、form-create/view-design以及可视化表单设计器 form-create/designer、移动端设计器 form-create/vant-designer。各适配包通过 workspace 依赖共享form-create/core核心引擎与form-create/utils工具库可在 packages/arco-design/package.json 的 dependencies 中确认因此同一份规则结构在不同 UI 框架下可以平移。3.2 分支说明latestVue 2.0 版本分支superVue 2.7 版本分支功能与 next 分支一致nextVue 3.0 版本分支。当前仓库中的form-create/arco-design属于nextVue 3分支其 peerDependencies 声明了vue: ^3.5.12devDependencies 使用arco-design/web-vue: ^2.56.3见 packages/arco-design/package.json对应 Arco Design 的 Vue 3 版本。四、安装与快速接入4.1 安装依赖npm install form-create/arco-design arco-design/web-vue vue^3.5.12 # 或使用 pnpm本仓库即 pnpm workspace 管理 pnpm add form-create/arco-design arco-design/web-vue包体说明packages/arco-design/package.jsonmain:./dist/form-create.min.jsCommonJS/UMD 产物module:./dist/form-create.esm.jsES Module 产物unpkg/jsdelivr:./dist/form-create.min.jsCDN 直用typings:./types/index.d.tsTypeScript 类型4.2 应用注册入口文件 packages/arco-design/src/index.js 会导出一个FormCreate实例并暴露maker生成器。注册方式如下参考 packages/arco-design/examples/main.jsimport {createApp} from vue import FormCreate from form-create/arco-design import install from form-create/arco-design/auto-import import App from ./App.vue FormCreate.use(install); // 按需注册 Arco Design 组件 const app createApp(App) app.use(FormCreate) // 全局注册 form-create / 组件 app.mount(#app)其中auto-import的作用是把表单会用到的 Arco 组件Form、Input、Select、Upload、Tree、Transfer、Tooltip、Popover、Mention 等二十余个逐个挂到应用上并引入对应样式见 packages/arco-design/auto-import.js。4.3 模板中使用template form-create :rulerule v-model:apifapi :optionoption v-modelformData / /template script setup import {ref} from vue import {maker} from form-create/arco-design const fapi ref({}) // 表单实例 API挂载后可用 const formData ref({}) // 表单数据双向同步 const option ref({resetBtn: true}) // 表单全局配置 const rule ref([ // 表单规则JSON 数组 maker.input(商品名称, goods_name, iphone) .props({placeholder: 请输入商品名称, clearable: true}) .validate([{required: true, message: 请输入商品名称, trigger: blur}]), maker.select(产品分类, cate_id, 104) .options([{value: 104, label: 生态蔬菜}, {value: 105, label: 新鲜水果}]), ]) /script4.4 全局 ArcoVue 自动接入如果项目通过window.ArcoVue全局引入 Arco Design安装时还会自动执行app.use(window.ArcoVue)无需手动逐个注册组件见 packages/arco-design/src/core/index.jsif (typeof window ! undefined window.ArcoVue) { FormCreate.useApp((_, app) { app.use(window.ArcoVue); }) }五、默认配置解析option 从哪来表单的全局配置option由 packages/arco-design/src/core/config.js 提供默认值未配置时表单直接可用配置项默认值说明form.layouthorizontal表单布局可切换inline行内模式form.labelAlignright标签对齐方式form.labelColProps{span: 3}标签占列Arco 栅格form.wrapperColProps{span: 21}表单项占列row.gutter0行间距submitBtn.disabled / loadingfalse/false提交按钮禁用态/加载态submitBtn.typeprimary提交按钮类型submitBtn.showtrue是否显示提交按钮resetBtn.typesecondary重置按钮类型resetBtn.showfalse是否显示重置按钮默认隐藏表单渲染层在 packages/arco-design/src/core/manager.js 的render中读取这些配置并通过makeRow/makeCol/makeFormBtn组装出 Arco 的AForm、ARow、ACol、AFormItem与按钮结构。例如切换行内布局只需一行 APIfapi.updateOptions({form: {layout: inline}})六、规则编写maker 生成器与纯 JSON 两种姿势6.1 maker 快捷生成器packages/arco-design/src/core/maker.js 针对 Arco Design 内置了丰富的快捷方法覆盖了 README 所称内置 20 种常用表单组件基础组件input、textarea、password、search、inputNumber别名number、inputTag别名tag、autoComplete别名auto、cascader、select、checkbox、radio、switch、slider、rate、timePicker别名time、datePicker、treeSelect、transfer、verificationCode等。高频变体maker.selectMultiple(可多选, tags) // select 多选 maker.sliderRange(区间, range) // slider 范围模式 maker.treeSelectMultiple(部门, dept_ids) // 树选择多选 maker.frameImage(图片, pic) // 素材选择-图片 maker.frameFile(文件, file) // 素材选择-文件 maker.uploadImage(轮播图, banner) // 图片上传 maker.uploadFile(附件, attach) // 文件上传日期快捷方法见 packages/arco-design/src/parsers/datePicker.jsmaker.date(活动日期, d) // 日期选择 maker.month(月份, m) // 月份选择 maker.year(年份, y) // 年份选择 maker.dateRange(日期区间, r) // 日期范围 maker.datetimeRange(时间区间, tr) // 日期时间范围6.2 纯 JSON 规则maker 生成的本质是一份可序列化的规则对象因此也可直接手写 JSON参考 packages/arco-design/examples/rule.jsconst rule [ // 隐藏域 {type: hidden, field: id, value: 14}, // 输入框校验提示 { type: input, field: goods_name, title: 商品名称, value: iphone, props: {placeholder: 请输入商品名称, clearable: true}, validate: [{required: true, message: 请输入商品名称, trigger: blur}], info: {info: 请输入商品名称!!!!!, type: tooltip} }, // 下拉选择 { type: select, field: cate_id, title: 产品分类, value: 104, options: [ {value: 104, label: 生态蔬菜}, {value: 105, label: 新鲜水果} ] }, // 对象子表单 { type: object, title: 对象组件, field: object, value: {date: 2121-12-12, field: 10}, props: { rule: [ {type: date, field: date, title: 日期, native: false, col: {span: 8}}, {type: inputNumber, field: field, title: 数值, validate: [{required: true, type: number}]} ] } }, // 分组批量表单 { type: group, title: 批量添加, field: group, value: [{date: 2121-12-12, field: 10}], props: { max: 5, min: 3, rule: [ {type: input, field: field2, title: 名称, validate: [{required: true}]} ] }, validate: [{required: true, min: 3, type: array, message: 最少增加3项}] } ]6.3 解析器如何工作规则到 Arco 组件的翻译由 parsers 完成packages/arco-design/src/parsers/index.js 注册了 select、datePicker、rangePicker、hidden、input、tree、row 七个解析器。以 select 解析器为例若规则顶层声明了options会自动合并到props.optionstree 解析器则会默认设置fieldNames.key id、checkable true并把字段值同步到checkedKeys。七、内置组件与组件别名映射7.1 扩展组件除 Arco 原生组件外包内还内置了 6 个扩展组件见 packages/arco-design/src/components/index.jsUploadfcUpload图片/文件上传封装SubFormfcSubForm对象/子表单容器对应type: subForm | objectGroupfcGroup批量数组容器对应type: group | array支持增删、排序、上下限max/min、卡片式展示等props 定义见 components/arco-design/group/src/component.jsxRadiofc-radio、Checkboxfc-checkbox选项型组件封装FramefcFrame素材选择框架组件图片/文件单选或多选IconInfoCircle提示气泡用的图标组件。7.2 组件别名映射packages/arco-design/src/core/alias.js 将规则中的type映射到 Arco 实际组件input→aInput、select→aSelect、datePicker→aDatePicker、slider→aSlider、switch→aSwitch、treeSelect→aTreeSelect、timePicker→aTimePicker、cascader→aCascader、colorPicker→aColorPicker等前缀统一为a框架自有的fcUpload、fc-checkbox、fc-radio、fcFrame、fcGroup、fcSubForm则映射到内置扩展组件。正因为有了这层别名规则里既可以写type: a-button直接使用 Arco 原生组件示例 packages/arco-design/examples/rule.js 即用maker.create(a-button)生成自定义按钮也可以通过FormCreate.component(wangEditor, wangEditor)把任意 Vue 组件注册进规则系统。八、表单操作 API从取值到提交安装后可通过v-model:api拿到表单实例fapi。以下 API 均可在 packages/arco-design/examples/App.vue 的演示中找到对应用法其核心实现在 packages/arco-design/src/core/api.js。8.1 数据与规则操作API说明fapi.formData()/fapi.form获取表单整体数据fapi.getValue(field)/fapi.setValue(field, value)读写单个字段值fapi.fields()获取所有字段信息fapi.getRule(field)获取某个字段的规则fapi.append(rule, field?)/fapi.prepend(rule, field?)在指定字段后/前插入规则fapi.append(rule, field, true)作为子节点slot追加fapi.removeField(field)删除字段fapi.toJson()输出当前规则的 JSON 字符串可序列化持久化8.2 状态与校验操作API说明fapi.hidden(flag, field?)隐藏/显示字段不传 field 则作用于整个表单fapi.disabled(flag, field?)禁用/启用字段或表单fapi.hideForm(flag)隐藏整个表单fapi.validate()校验全部字段返回 Promisefapi.validateField(field)校验单个字段fapi.clearValidateState()清空全部校验状态fapi.resetFields(fields?)重置字段/表单值fapi.refresh()/fapi.reload()刷新渲染 / 重载规则8.3 按钮控制fapi.submitBtnProps({loading: true, disabled: true}) // 提交按钮加载态/禁用态 fapi.resetBtnProps({show: true}) // 显示重置按钮 fapi.btn.show(false) / fapi.btn.loading(true) // btn 快捷方法 fapi.resetBtn.show(true) / fapi.resetBtn.loading(true) // resetBtn 快捷方法8.4 提交流程submit()内部会先执行整体校验除非validateOnSubmit false再收集数据并触发beforeSubmit钩子、onSubmit配置与submit事件packages/arco-design/src/core/api.jsfapi.submit( (formData, api) { /* 成功回调formData 为校验后的表单数据 */ }, (api, ...errors) { /* 失败回调 */ } )九、组件联动与高级场景9.1 control 值联动当某个字段满足特定值时动态渲染一组新规则示例见 packages/arco-design/examples/rule.jsmaker.radio(是否包邮, is_postage, 0) .options([ {value: 0, label: 不包邮}, {value: 1, label: 包邮} ]) .control([ {value: 1, rule: [maker.number(满额包邮, postage_money, 0)]} // 选择包邮后出现新字段 ])9.2 effect 字段联动通过effect声明依赖关系字段值变化时触发对方重新计算示例中 cascader 即使用.effect({address: 1})。9.3 handle 函数式联动control的handle支持函数式判断实现区间类条件渲染示例 packages/arco-design/examples/rule.jsmaker.rate(推荐级别, rate, 2) .control([ {handle: (val) val 5, rule: [maker.input(好评原因, goods_reason)]}, {handle: (val) val 5, rule: [maker.input(差评原因, bad_reason)]} ])9.4 上传与素材选择上传组件通过 props 透传 Arco Upload 能力packages/arco-design/examples/rule.jsmaker.upload(轮播图, pic, [http://form-create.com/logo.png]) .props({ action: http://127.0.0.1:8324/api/test, limit: 2, listType: picture-card, name: file, onSuccess(file) { file.url file.response.data.url } })frame 素材组件则支持内嵌 iframe 选择器packages/arco-design/examples/rule.jsmaker.frame(素材, fodder, [http://form-create.com/logo.png]) .props({ src: ../iframe.html, // 选择器页面地址 maxLength: 0, // 0 表示不限数量 type: image, // image / file / input width: 80%, modalTitle: 预览~~~ }) .validate([{required: true, type: array, min: 2, message: 请选择2张图片}])十、本地运行与调试本仓库使用 pnpm workspace 管理见 pnpm-workspace.yaml 与 lerna.jsonarco-design 包的开发脚本定义在 packages/arco-design/package.jsonpnpm install pnpm --filter form-create/arco-design dev:arco # 启动 vite 开发服务运行 examples 演示页 pnpm --filter form-create/arco-design build:lib # 构建 dist 产物演示页packages/arco-design/examples/App.vue集成了全部 API 按钮、双栏 JSON 编辑器与实时表单预览是理解该包行为最快的入口规则样例见 packages/arco-design/examples/rule.js 与 packages/arco-design/examples/jsonRule.js。结语form-create/arco-design将JSON 即表单的低代码思想与 Arco Design 的组件能力无缝衔接规则层负责描述结构与联动解析层负责翻译成 Arco 组件实例 API 负责数据与状态流转而扩展组件subForm、group、upload、frame则补齐了复杂业务表单的最后一块拼图。无论是中后台 CRUD 表单、多级嵌套的批量录入还是需要可视化设计器托管的动态表单都可以基于本包快速构建并借助统一的规则结构在 form-create 生态的 8 个 UI 框架之间平滑迁移。赞分享低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载相关推荐APITable Form 表单组件深度解析基于 react-jsonschema-form 的 JSON 驱动表单定制指南APITable Form 表单组件深度解析基于 react jsonschema form 的 JSON 驱动表单定制指南导读 APITable 前端组件低代码后端前端协同办公Arco Design Form 表单控件联动实战深入理解 shouldUpdate 动态渲染机制Arco Design Form 表单控件联动实战深入理解 shouldUpdate 动态渲染机制导读在 Arco Design 的 Form 组件体系中UI组件前端设计系统arco-design Form 实战用 Form.List 动态增减表单项管理数组型表单结构arco design Form 实战用 Form.List 动态增减表单项管理数组型表单结构本文围绕 arco designArco Design RUI组件前端设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

form-create 接入 Arco Design：基于 JSON 驱动的低代码动态表单组件实战指南

相关推荐

C++三次样条拟合实现：嵌入式实时场景下的高性能曲线建模

Logstash 同步 MySQL 8 到 Elasticsearch 实战避坑指南

编程改变命运：从技术思维到职业跃迁的实战指南

更多资讯

微信小程序K线图开发实战：HQChart集成与通达信公式解析

线上小班课和一对一哪个更适合初中生？2026年10月选课盘点

Android系统架构深度解析：从应用层到内核层的完整指南

单总线搜索ROM不稳定？DS18B20并联搜索原理与避坑指南

完全二叉树数组实现的调试陷阱与底层原理

NUIST程序设计OJ题库：新手代码能力断层破解指南

今日更新

防关联浏览器哪个好？三款产品实测差异解析

2026钢铁行业AI转型系统选型对比：多基地排产、大宗原燃料采购与质量追溯，六家厂商能力差异在哪里

影刀RPA深度实战：大模型Fine-tuning定制RPA专用Prompt与指令生成

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？