前言

我们都知道做后台项目打交道最多的就是表单了，因人而异在表单这块花费的时间也是不一样的，可以说表单占据了我们大部分的页面开发时间，因为起初团队里没有个统一的页面表单规范，可谓每个人都写得很freestyle了。也许我们当时只顾敲的一时爽，一直敲一直爽。但是欠下的债迟早有一天是要还的。有一句话这么说：“不会偷懒的程序员不是好程序员”。对于我这么一个喜欢偷懒的老程来讲，实在是觉得写重复的东西有点浪费生命，我总觉得生活不应该这样，应该还有诗和远方。所谓："我命由我不由天，手写表单费时间"。于是乎我要逆天而行了，踏上了重构表单的这条不归路。

表单进阶

初级：开发一款表单组件，最好能统一规范表单页面开发 (element-form-schema 它来了)
中级：基于 VS code Snippets，开发一些element-ui组件的snippets代码片段 (element-form-schema.json.code-snippets 它来了)
高级：基于 VS code IDE的插件功能，开发一款UI交互的表单拖拽生成页面文件的插件 (element-form-schema-editor 它来了)

初级：开发一款表单组件，最好能统一规范表单页面开发 (element-form-schema 它来了)

其实在开发表单组件的时候，调研了一些业界类似的方案，react的方案比较多，比如uform（阿里）、amis（百度）等属于大公司方案，而对于vue框架下的通用且能满足项目里业务的表单schema方案很少，即使你找到了也没法一眼看出里面的坑，除非你对它了如指掌，要不然那就是给团队里埋坑。我举几个form schema必须支持的功能：必须支持所有的组件（自定义组件、全局注册组件）、组件必须支持类似于v-if复杂条件（联动需要）、必须支持组件包含数组的情况、必须支持组件之间任意的slot插槽。再三考虑就开发了 element-form-schema。

element-form-schema 是基于 vue render, element-ui 开发的一款表单组件，旨在：

为了统一一致form表单标准化开发;
为了提高表单的开发效率;
为了让表单变得具有可维护性;

element-form-schema 特性：

支持 `查询表单`、`弹框`、`新增表单` 的需求
支持查询表单的 `展开/隐藏` 需求
支持设置表单组件延用 `element-form-item` 的 `rules` 验证，可以通过 `ref`, 调用 `resetFields` 方法
【亮点】支持单独设置表单组件中的 `inline` 特殊性
【亮点】支持统一设置组件：`size`、`width`
【亮点】支持表单组件之间的简单、复杂联动 `隐藏：vif: '条件'`，`禁用：props: { disabled: '条件' }`
【亮点】支持表单中数组的双向绑定，可以通过 `{ tag: 'slot', slot: 'slot-name' }` 来处理
【亮点】支持业务组件

其实表单最多出现在2种情况，可以归纳为：列表查询表单、新增页面表单

简单场景：

复杂一些的场景：

element-form-schema 表单组件代码片段：

中级：基于 VS code Snippets，开发一些element-ui组件的snippets代码片段 (element-form-schema.json.code-snippets 它来了)

可能有人会问，那你们如何做 snippets 的更新了，是复制粘贴吗？其实我们是开发了一款内部的 node cli 工具去统一维护更新的（注：如果大家有啥好建议可以告诉我）

高级：基于 VS code IDE的插件功能，开发一款UI交互的表单拖拽生成页面文件的插件 (element-form-schema-editor 它来了)

这里非常感谢JakHuang的插件给我带来的灵感：https://github.com/JakHuang/form-generator-plugin

列表查询表单：

新增页面表单：

组件属性设置：

GIF 演示：

总结：我相信还是有很多开发者像我这样，每天还在重复干着手写表单的事情，我也希望这篇文章多少能给大家提供一点思路，带来一点启发。

都已经2020年了，少年请记住："我命由我不由天，手写表单费时间" 。