如何设计一个真正可扩展的表单生成器？

🧩 如何设计一个真正可扩展的表单生成器？

🧠 你写过多少次 CRUD 表单？登录表单、搜索表单、配置表单、后台管理表单......

有没有想过：为什么不抽象成一套"表单引擎"？

封装一个可以扩展的表单生成器，尤其是对一些中后台系统、低代码平台、企业级项目，会非常有价值。

🚀 一、从"写表单"到"设计表单系统"

我们先看一个普通的表单：

js 复制代码

<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 驱动：表单的核心抽象

理想状态是这样：

js 复制代码

const schema = [
  {
    type: 'input',
    label: '用户名',
    field: 'username',
    props: {
      placeholder: '请输入用户名'
    }
  },
  {
    type: 'number',
    label: '年龄',
    field: 'age',
  }
]

然后我们写一个 <SchemaForm />：

js 复制代码

<SchemaForm :schema="schema" v-model="formData" />

这就是：

Schema Driven UI（配置驱动 UI）

🧠 三、设计表单生成器的核心架构

一个成熟的表单生成系统，至少包含 5 个层次：

markdown 复制代码

Schema 配置层
      ↓
字段解析层
      ↓
组件映射层
      ↓
状态管理层
      ↓
渲染引擎层

我们逐层拆解。

🧩 四、组件映射系统设计（核心关键）

最重要的一步：

type → 组件映射

js 复制代码

const componentMap = {
  input: ElInput,
  number: ElInputNumber,
  select: ElSelect,
}

渲染逻辑：

js 复制代码

const Component = componentMap[item.type]

return h(Component, {
  ...item.props,
  modelValue: formData[item.field],
  'onUpdate:modelValue': (val) => {
    formData[item.field] = val
  }
})

这样我们就实现了：

✅ 动态组件渲染
✅ 双向绑定
✅ 可扩展组件类型

🧱 五、真正高级的地方：扩展能力设计

一个"玩具级"表单生成器和一个"工程级"的区别在于：

可扩展能力

必须支持：

1️⃣ 动态显隐

js 复制代码

{
  type: 'input',
  field: 'company',
  visible: (form) => form.role === 'admin'
}

解析时：

js 复制代码

if (typeof item.visible === 'function') {
  return item.visible(formData)
}

2️⃣ 联动机制

js 复制代码

{
  type: 'select',
  field: 'province',
  onChange: (val, form) => {
    form.city = ''
  }
}

3️⃣ 异步字段（远程选项）

js 复制代码

{
  type: 'select',
  field: 'user',
  asyncOptions: () => fetchUserList()
}

4️⃣ 插槽扩展

js 复制代码

<SchemaForm>
  <template #customField="{ field }">
    <MyCustomComponent />
  </template>
</SchemaForm>

🧠 六、状态管理怎么设计才优雅？

很多人会这样写：

js 复制代码

const formData = reactive({})

但在复杂场景中：

校验
dirty 状态
touched 状态
提交状态
异步 loading

你需要抽象出一个 FormStore

js 复制代码

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 抽象成数据

把行为抽象成规则

把渲染抽象成引擎