我命由我不禁天，手写表单费时间

前言

咱们都知道作后台项目打交道最多的就是表单了，因人而异在表单这块花费的时间也是不同的，能够说表单占据了咱们大部分的页面开发时间，由于起初团队里没有个统一的页面表单规范，可谓每一个人都写得很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的插件给我带来的灵感：github.com/JakHuang/fo…

列表查询表单：

新增页面表单：

GIF 演示：

总结：我相信仍是有不少开发者像我这样，天天还在重复干着手写表单的事情，我也但愿这篇文章多少能给你们提供一点思路，带来一点启发。

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