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

13,458 阅读4分钟

前言

我们都知道做后台项目打交道最多的就是表单了,因人而异在表单这块花费的时间也是不一样的,可以说表单占据了我们大部分的页面开发时间,因为起初团队里没有个统一的页面表单规范,可谓每个人都写得很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年了,少年请记住:"我命由我不由天,手写表单费时间" 。