# 背景

前端领域里，在中后台实际业务场景中，基本上逃不过表单页面的开发，表单页面承担着数据输入的角色，是数据收集的重要来源。

而对于工程中使用 Element 作为UI组件库的项目而言，前端开发者在使用 el-form 的时候可能更多的都在关注：

• 如何布局表单
• 表单控件类型
• 表单控件配置项
• 表单的状态管理
• 表单校验

从而为了实现一个业务场景复杂的表单，往往要编写大量重复的代码，以及产生篇幅巨大的单页面组件，而这样的开发方式是不必要的。

# 方案

经过我们在表单领域的不断探索与尝试，总结出了一套基于 JSON Schema 规范的数据动态生成表单的解决方案 Element Schema Form。

Element Schema Form 是一个基于 Vue、element-ui 技术栈封装的表单组件，用于解决大型、复杂表单页面开发过程中所做的大量重复性工作。使用一份 JSON Schema 即可生成一个成型的 form 表单，使表单组件代码变得简洁并便于维护。开发表单更高效。

# 核心功能

• 基于 JSON Schema 的数据结构生成表单
• 基于 el-row/el-col 的灵活表单布局
• 支持所有 element-ui 基础表单组件
• 支持常用第三方扩展组件，如 codemirror、quill editor、markdown editor 等
• 支持个性化的自定义插槽组件
• 支持可视化构建表单

# JSON Schema 规范

如果你还不了解什么是 JSON Schema，请移步这里 JSON Schema

# 可视化探索

为了开发更高效，我们提供了基于 Element Schema Form 开发的可视化配置工具

表单设计器 element-form-generator

只需简单操作几步即可配置好一个 form 表单