JSON驱动表单渲染核心是“解析配置→映射组件→绑定数据→挂载验证”，需包含表单容器属性、字段定义列表、校验规则、组件专属属性四类字段，Vue中通过递归+动态组件实现。

直接用 JSON 配置驱动表单渲染，核心是“解析配置 → 映射组件 → 绑定数据 → 挂载验证”。不需要为每个页面写重复的 和 ，后端返回什么结构，前端就动态生成什么表单。

JSON 配置要包含哪些关键字段

一个可用的配置至少得有这四类信息：

• 表单容器属性：比如 labelWidth、size、cols（列数），用于控制整体样式和布局
• 字段定义列表：fields 或 formItems 数组，每项含 field（字段名）、type（组件类型，如 "input"、"select"、"date-picker"）、label、placeholder
• 校验规则：每个字段下带 rules 数组，格式与 Element Plus 的 el-form-item 规则一致，支持 required、min/max、pattern 等
• 组件专属属性：用 props 字段透传，比如 { clearable: true, disabled: false }，或 options 用于下拉选项

Vue 中怎么把 JSON 变成真实表单

推荐用递归渲染 + 动态组件（）的方式，不依赖第三方库也能实现：

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• 外层套 ，formData 是响应式对象，初始值由配置中 defaultValue 或空对象生成
• 遍历 fields，对每个字段生成
• 内部用 ，getComponent 是个映射函数，比如 input → 'el-input'，select → 'el-select'
• 遇到 type: "slot" 或需要自定义结构（如级联选择、树形选择），可预留插槽或用 v-if 分支处理

注意数据与校验的联动细节

光渲染出来还不够，几个易错点必须处理好：

• 初始值要深拷贝：避免多个表单实例共享同一份默认值对象，尤其 Array 或 Object 类型字段
• rules 必须是响应式引用：不能直接写 :rules="item.rules"，因为 item.rules 是静态数组；建议用计算属性或 computed 生成每个字段对应的规则数组
• 异步加载配置后需强制更新表单状态：比如调用 this.$nextTick(() => this.$refs.form.clearValidate())，防止旧校验残留
• 禁用/只读状态要透传到子组件：Element Plus 很多组件（如 el-date-picker）不识别 disabled，得用 props.disabled 或 props.readonly

要不要用 form-create 这类现成方案

如果项目中表单复杂度高、迭代频繁，或者需要拖拽设计、导出代码、多语言等能力，直接用 @form-create/designer 更省心。它封装了 JSON 解析、组件映射、事件代理、API 调用等全套逻辑，且同时支持 Vue2/Vue3 + Element UI/Plus。但若只是轻量级需求，手写一个 200 行以内的动态表单组件，更可控、无额外包体积、调试也更直接。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！