JSON驱动表单渲染核心是“解析配置→映射组件→绑定数据→挂载验证”，需包含表单容器属性、字段定义列表、校验规则、组件专属属性四类字段，Vue中通过递归+动态组件实现。
直接用 JSON 配置驱动表单渲染，核心是“解析配置 → 映射组件 → 绑定数据 → 挂载验证”。不需要为每个页面写重复的 <el-form></el-form> 和 <el-input></el-input>，后端返回什么结构，前端就动态生成什么表单。
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 变成真实表单
推荐用递归渲染 + 动态组件（<component :is></component>）的方式，不依赖第三方库也能实现：
- 外层套
<el-form :model="formData" :rules="rules"></el-form>，formData是响应式对象，初始值由配置中defaultValue或空对象生成 - 遍历
fields，对每个字段生成<el-form-item :prop="item.field" :rules="item.rules"></el-form-item> - 内部用
<component :is="getComponent(item.type)" v-model="formData[item.field]" v-bind="item.props"></component>，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 行以内的动态表单组件，更可控、无额外包体积、调试也更直接。
