form-create-designer的JSON规则揭秘：一份数据结构如何生成完整动态表单

form-create-designer的JSON规则揭秘一份数据结构如何生成完整动态表单【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designerFcDesignerform-create-designer是一款开源的 Vue 低代码可视化表单设计器通过拖拽即可创建表单并最终把设计成果以一份JSON 规则的形式生成完整的动态表单同时支持 PC 端和移动端。很多同学只把它当拖拽工具用却很少拆开看过它背后的 JSON 规则到底长什么样。这篇文章就带你从数据结构的角度看懂这份 JSON 是如何一步步长出一张完整动态表单的。什么是 form-create JSON 规则简单来说表单 一段 JSON。每一个表单控件输入框、下拉框、日期选择器……在 JSON 里就是一个普通对象所有对象按顺序组成一个数组数组就是整张表单的完整描述。form-create 渲染引擎拿到这个数组后逐个读取type字段映射成对应的 UI 组件再根据其余字段填充标题、属性、校验和布局表单就自动生成了。下面是一个姓名输入框最精简的 JSON 规则[{ type: input, field: name, title: 姓名, props: {} }]只有 4 个字段一张表单就出来了。设计器里每个组件的默认规则都定义在各自的规则文件中比如输入框的工厂函数位于 input.js它返回的正是上面这种结构field由工具函数自动生成唯一值保证字段名不冲突。JSON 规则核心结构5 个字段看懂一切一份 JSON 规则中反复出现的字段其实屈指可数掌握这 5 个就能读懂任何一份表单规则字段作用通俗理解type组件类型决定渲染成什么控件input、select、fcRow…field字段名表单数据里的键提交时formData[field]就是它的值title标题显示在控件旁边的标签文字props组件属性透传给底层 UI 组件的参数如placeholder、disabledchildren子组件嵌套布局的关键数组里放套娃的子规则设计器右侧属性面板里能改的每一项最终都落在title、props、validate这些字段上。比如基础字段配置字段名、标题、提示信息、标签宽度统一由 base/field.js 提供它本质上是告诉设计器每个组件都要在属性面板里渲染出哪几个输入项。从设计时画布到导出 JSON一次转换发生了什么这是最值得揭秘的一环设计器画布上显示的表单和最终导出的 JSON 并不是同一份数据。设计器内部用一个独立的表单实例form.js 中的designerForm来承载整个画布这棵树里混着仅设计时可见的包装节点。当你点击导出时FcDesigner.vue 里的两个方法接力完成转换getRule() { // 1. 深度拷贝画布节点树剥离设计专用包装 return methods.parseRule(deepCopy(data.dragForm.rule[0].children)); }, getJson() { // 2. 把规则树序列化成可持久化的 JSON 字符串 return designerForm.toJson(methods.getRule()); }以分组组件为例它的设计时形态和导出形态就完全不同转换逻辑写在 subForm.js加载时loadRuleJSON 里的props.rule被取出放进children类型临时改成fcRow方便在画布上直接拖拽编辑导出时parseRule再把children塞回props.rule类型还原为subForm。也就是说同一份表单存在设计形态和运行形态两种序列化parseRule/loadRule就是两者之间的翻译官。理解了这一点你手动改 JSON 时就不会疑惑为什么我画的子表单导出后变成了一个 props。用 JSON 描述多列嵌套布局row、col 与 subForm真实表单很少是单列的JSON 通过children嵌套来表达布局。栅格布局规则定义在 row.js[{ type: fcRow, props: { gutter: 16 }, children: [ { type: fcCol, field: userName, title: 用户名, props: { span: 12 } }, { type: input, field: age, title: 年龄, props: { span: 12 } } ] }]规律非常清晰布局组件fcRow/fcCol只描述位置不产生数据真正的数据字段仍然由field决定。子表单同理它把一组字段收拢成一个object类型的数据节点导出后整组字段会打包进props.rule。校验与事件挂在同一条规则上的两个字段动态表单不只是能填还要能校验、能响应。校验配置由 base/validate.js 统一注入到每个组件的属性面板最终体现为 JSON 里的两个字段[{ type: input, field: email, title: 邮箱, $required: true, validate: [{ required: true, message: 邮箱不能为空 }], event: { blur: console.log(失去焦点) } }]$required一键必填开关设计器里的必填复选框就是改它validate更精细的校验规则数组格式、长度、自定义校验器event事件对象支持的类型在每个规则文件里声明例如输入框声明了blur、focus、change等 5 种事件见 input.js。一条 JSON 规则 组件 数据 校验 行为这是它能独立生成完整动态表单的根本原因。获取并落地使用 JSON 规则的步骤导出规则设计器点击保存时会触发save事件并携带ruleJSON 规则与options表单选项代码入口见 FcDesigner.vue持久化把 JSON 存到数据库或配置文件即可它是一份纯数据、与框架解耦的描述天然适合版本管理渲染表单业务页面引入 form-create调用parseJson把字符串还原为规则对象传给form-create组件看代码对照理解设计器的预览功能会用 template.js 中的模板把 JSON 直接生成一份可运行的 Vue 组件代码是学习规则结构最快的方式。想动手看源码的话克隆仓库即可git clone https://gitcode.com/xaboy/form-create-designer延伸40 组件规则都放在哪里所有内置组件的规则统一注册在 config/index.js 的ruleList数组中涵盖输入、选择、日期、布局、富文本、表格、签名板等 40 多种组件。仓库是一个 monorepo同一个规则体系同时服务于三套 UIpackages/element-ui/Element Plus 版PC 端主力packages/ant-design-vue/Ant Design Vue 版packages/vant/Vant 移动端版组件之间规则结构完全一致只是type与默认props不同——这正是一份 JSON 生成任意表单的底气所在。小结回看全文JSON 规则的秘密可以浓缩成三句话结构即表单type定控件、field定数据、props定行为、children定布局双形态转换设计时树与导出 JSON 通过parseRule/loadRule互相翻译保证画布可编辑、产物可运行规则即接口JSON 既是设计器的保存格式也是前后端、多 UI 框架之间传递表单的通用协议。下次在设计器里拖一个组件不妨打开预览看一眼它对应的 JSON——你会发现你拖动的从来不是控件而是一段正在成形的数据结构。【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考