Vue 3 动态表单采用配置驱动渲染，后端返回含 fields、嵌套逻辑、UI 元信息的 schema，通过 setup + v-for + component :is 动态挂载组件，响应式生成 formData 与 formRules，并支持 group/tabs/table 等复杂布局。
Vue 3 中动态表单根据后端返回的数据生成布局，核心在于“配置驱动渲染”——把表单结构定义成数据（即 schema），再用 Vue 的响应式能力和组件化机制将其转为真实 DOM。不写死字段，也不硬编码组件，一切由后端返回的 JSON 控制。
表单配置结构要清晰可扩展
后端应返回标准化的表单描述对象，例如：
- fields 数组：每个字段含 type（input/select/date/switch 等）、key（唯一标识）、label、rules（校验规则字符串或对象）、attrs（原生属性如 placeholder）、options（select 下拉项）等
- 支持嵌套与条件：可带 next 字段或 visibleIf 表达式，实现“选中 A 后显示 B 字段”这类逻辑
- 保留 UI 元信息：如 span（栅格占比）、colProps（ElCol 或 a-col 配置）、customRender（自定义渲染函数）等，方便前端做布局控制
用 setup + v-for + component :is 渲染字段
在模板中遍历 fields，通过 :is 动态挂载对应组件：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 定义一个
getComponent(type)方法，映射 type 到实际组件（如InputField、SelectField） - 每个字段组件接收 field prop，并内部绑定
v-model="formData[field.key]" - 使用
<el-form-item></el-form-item>或<a-form-item></a-form-item>包裹，自动继承 label、校验提示等 - 栅格布局可通过 field 上的
span或colProps透传给<el-col></el-col>实现响应式分栏
表单数据与校验规则必须联动生成
不能手动写 ref 或 rules 对象，要用响应式方式从 schema 推导：
立即学习“前端免费学习笔记（深入）”；
- 用
reactive({})初始化formData，遍历 fields 自动赋初始值（如 string → ''，array → []） - 用
reactive({})构建formRules，以 field.key 为 key，将后端 rules 字符串（如 "required|min:3"）解析为 Ant Design Vue 或 Element Plus 所需的规则数组 - 若需异步校验（如用户名是否已存在），可在 schema 中预留 asyncRule 字段，由字段组件按需调用
复杂布局靠 schema 层级+容器组件支持
单纯线性字段不够？schema 可支持 layout 类型：
- type = "group"：渲染
<el-card></el-card>或<a-card></a-card>，children 是子字段数组 - type = "tabs"：生成 tab 标签页，每个 tab.item 对应一组字段，配合
v-model:activeKey控制切换 - type = "table"：用于可增删行的二维数据，每行是独立字段集，用
v-for套<el-table></el-table>+<el-table-column></el-table-column>动态列 - 所有容器类 type 都应支持自定义 class / style / props，便于微调样式和行为
