vue 3动态表单核心是数据驱动渲染，json配置需含formid、全局样式、fields数组（含field/type/label/required/defaultvalue等）、rules、props、api/options；渲染器用 + 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></component> + v-model 双向绑定是最轻量的做法：

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

• 外层套 <el-form></el-form>，绑定 :model="formData" 和 :rules="mergedRules"
• 遍历 fields，每个字段用 <el-form-item></el-form-item> 包裹，:prop 对应字段名
• 内部用 <component :is="item.component || `el-${item.type}`" v-model="formData[item.field]" v-bind="item.props"></component>
• 校验规则需动态合并：把字段级 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 自动换行

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