Vue 3动态表单核心是数据驱动渲染，JSON配置需含formId、全局样式、fields数组（含field/type/label/required/defaultValue等）、rules、props、api/options；渲染器用<component :is> + v-model实现，支持条件显隐、值联动、远程加载及自定义组件；配套表单初始化、校验、格式化输出与响应式布局。
Vue 3 动态表单根据 JSON 配置生成完整页面，核心是“用数据驱动渲染”，而不是写死模板。只要 JSON 描述清楚字段类型、布局、校验和交互逻辑，组件就能自动组装出可运行的表单页面。
JSON 配置要包含哪些关键字段
一份可用的配置至少得有这几个部分：
- formId：唯一标识，用于缓存、日志或权限控制
- labelWidth / size / cols：全局样式控制，比如标签宽度、组件尺寸、栅格列数
- fields 数组：每个字段对象含 field（绑定字段名）、type（如 input / select / date-picker / tree-select）、label、required、defaultValue 等
- rules：校验规则数组，支持 required、min/max、pattern、validator 函数引用等
- props：透传给底层 UI 组件的属性，比如 clearable、showPassword、nodeKey
- api 或 options：下拉类组件的数据来源，可以是静态数组，也可以是接口 URL
渲染器组件怎么实现
用 Vue 3 的 <component :is> + v-model 双向绑定是最轻量的做法：
OpenGemini Next.js Bestpractice Builder
下载
使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。
- 外层套
<el-form>，绑定:model="formData"和:rules="mergedRules" - 遍历
fields，每个字段用<el-form-item>包裹，:prop对应字段名 - 内部用
<component :is="item.component || `el-${item.type}`" v-model="formData[item.field]" v-bind="item.props"> - 校验规则需动态合并：把字段级 rules 和全局规则统一处理，确保
el-form能识别 - 对特殊类型（如树形选择、级联选择）做单独封装组件，再注册进渲染器映射表
如何支持复杂交互与数据联动
纯静态配置不够用时，可通过扩展机制增强灵活性：
立即学习“前端免费学习笔记（深入）”；
-
条件显隐：在字段中加
showIf: "status === '1'"，渲染器执行eval或用Function构造沙箱表达式判断 - 值联动：监听 formData 变化，当 A 字段变，自动设置 B 字段的 options 或重置其值
-
远程加载：字段带
api时，在 mounted 或 watch 中调用接口，并将结果赋给options -
自定义组件注入：允许配置
component: "CustomUpload"，并在渲染器中提前注册该组件
配套能力不能少
只渲染出来还不够，一个能落地的动态表单还需要：
-
表单初始化：根据
defaultValue或后端返回数据，自动填充formData -
提交前校验：调用
formRef.validate()，失败时滚动到首个错误字段 - 数据格式化输出：比如日期组件转为 ISO 字符串、多选框转数组、文件上传转 fileIds
- 错误提示定制：支持字段级 message，也支持全局统一提示方式（ElMessage / Tooltip）
-
响应式布局适配：通过
span控制栅格占比，配合 Element Plus 的el-row/col自动换行
