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

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

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

一、从“写表单”到“设计表单系统”

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

<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>

问题在哪？

• 每个页面都写一遍
• 字段变化要改代码
• 无法动态生成
• 后端配置驱动做不了

这时候我们会思考一个问题：

二、Schema 驱动：表单的核心抽象

理想状态是这样：

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

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

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

这就是：

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

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

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

我们逐层拆解。

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

最重要的一步：

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() {}
}

️ 七、企业级表单生成器的高级能力

真正成熟的系统会支持：

八、进阶认知：为什么很多大厂都在做 Schema Form？

原因很简单：

• 后端驱动 UI
• 多系统复用
• 业务快速迭代
• 统一规范
• 降低重复开发成本

Ant Design Pro、阿里飞冰、字节内部平台，核心都在做这件事。

九、总结：表单生成器的本质是什么？

不是为了“少写代码”。

而是：