🧩 如何设计一个真正可扩展的表单生成器？
🧠 你写过多少次 CRUD 表单？登录表单、搜索表单、配置表单、后台管理表单……
有没有想过：为什么不抽象成一套“表单引擎”？
封装一个可以扩展的表单生成器，尤其是对一些中后台系统、低代码平台、企业级项目，会非常有价值。
🚀 一、从“写表单”到“设计表单系统”
我们先看一个普通的表单：
<el-form :model="form">
<el-form-item label="用户名">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="form.age" />
</el-form-item>
</el-form>
问题在哪？
- ❌ 每个页面都写一遍
- ❌ 字段变化要改代码
- ❌ 无法动态生成
- ❌ 后端配置驱动做不了
这时候我们会思考一个问题：
能不能用 JSON 描述表单？
📦 二、Schema 驱动：表单的核心抽象
理想状态是这样：
const schema = [
{
type: 'input',
label: '用户名',
field: 'username',
props: {
placeholder: '请输入用户名'
}
},
{
type: 'number',
label: '年龄',
field: 'age',
}
]
然后我们写一个 <SchemaForm />：
<SchemaForm :schema="schema" v-model="formData" />
这就是：
Schema Driven UI（配置驱动 UI）
🧠 三、设计表单生成器的核心架构
一个成熟的表单生成系统，至少包含 5 个层次：
Schema 配置层
↓
字段解析层
↓
组件映射层
↓
状态管理层
↓
渲染引擎层
我们逐层拆解。
🧩 四、组件映射系统设计（核心关键）
最重要的一步：
type → 组件映射
const componentMap = {
input: ElInput,
number: ElInputNumber,
select: ElSelect,
}
渲染逻辑：
const Component = componentMap[item.type]
return h(Component, {
...item.props,
modelValue: formData[item.field],
'onUpdate:modelValue': (val) => {
formData[item.field] = val
}
})
这样我们就实现了：
- ✅ 动态组件渲染
- ✅ 双向绑定
- ✅ 可扩展组件类型
🧱 五、真正高级的地方：扩展能力设计
一个“玩具级”表单生成器和一个“工程级”的区别在于：
可扩展能力
必须支持：
1️⃣ 动态显隐
{
type: 'input',
field: 'company',
visible: (form) => form.role === 'admin'
}
解析时：
if (typeof item.visible === 'function') {
return item.visible(formData)
}
2️⃣ 联动机制
{
type: 'select',
field: 'province',
onChange: (val, form) => {
form.city = ''
}
}
3️⃣ 异步字段（远程选项）
{
type: 'select',
field: 'user',
asyncOptions: () => fetchUserList()
}
4️⃣ 插槽扩展
<SchemaForm>
<template #customField="{ field }">
<MyCustomComponent />
</template>
</SchemaForm>
🧠 六、状态管理怎么设计才优雅？
很多人会这样写：
const formData = reactive({})
但在复杂场景中：
- 校验
- dirty 状态
- touched 状态
- 提交状态
- 异步 loading
你需要抽象出一个 FormStore
class FormStore {
values = reactive({})
errors = reactive({})
touched = reactive({})
setFieldValue(field, value) {
this.values[field] = value
}
validate() {}
}
⚙️ 七、企业级表单生成器的高级能力
真正成熟的系统会支持：
| 能力 | 说明 |
|---|---|
| 嵌套表单 | object / array 结构 |
| 动态增删字段 | 表单列表 |
| 表单分组 | step 表单 |
| 表单布局系统 | grid / col 配置 |
| 表单 JSON 导出 | 支持保存配置 |
| 拖拽编辑器 | 低代码场景 |
| 远程 schema | 后端下发表单配置 |
🔥 八、进阶认知：为什么很多大厂都在做 Schema Form？
原因很简单：
- 后端驱动 UI
- 多系统复用
- 业务快速迭代
- 统一规范
- 降低重复开发成本
Ant Design Pro、阿里飞冰、字节内部平台，核心都在做这件事。
🧠 九、总结：表单生成器的本质是什么？
不是为了“少写代码”。
而是：
把 UI 抽象成数据
把行为抽象成规则
把渲染抽象成引擎
