vue的表单需求中我是如何偷懒的

在 B端 系统中 表单 和 表格 是两个非常常见的业务场景, 如果能够打造一个 通用性强, 灵活性高 , 可扩展 的表单或表格组件, 那么将大大提高我们的生产力.

下图为 ElementPlus 官网中的样例, 也是我们在开发中大多数的开发方式, 区别就在于 el-form-item 的不同

基于以上模式的表单构建中, 整体结构相同, 变化的是 form-item 以及 表单控件间的动态关系等, 于是我们开始思考, 是否可以将表单渲染的流程抽象, 形成一个通用性的表单渲染器? 预期达到以下效果

我们将 form-item 抽象出来, 作为组件入参, 以后的 N多 表单我们只用传入不同的 form-item 即可.

虽然以上封装已经隐蔽的很多细节, 方便了许多, 但是我们很懒, form-items 这些我也不想写, 并且, 如果表单需求有改动, 我还要 改代码->测试->pr->打包->发布, (⊙﹏⊙)是不是心里又有想法了, 我们期望组件可如下

表单的所有信息, 可以通过接口进行拉去, 包括 表单控件, 提交地址 , UI布局, 动态关系, 验证规则 等等, 此后表单需求无论有任何变化, 我们只要改动后端接口下发的数据即可, 我们称之为 formSchema

formSchema 就是一坨 json, 可以保存在 后端代码中, 也可以存储于 DB, 可以利用可视化构建工具来自动构建

至此我们就完成了 可视化构建工具 -> formSchema Db 存储 -> 接口下发 -> vForm渲染 这么一套高度可复用的表单构建流程了, 以后的表单需求是不是可以扔个后端人员或者运营人员自己去搞了, (^o^)/~想想都开心

vForm 组件的封装有两个思路

• 使用 vue template
• 使用 jsx, tsx

以上两种方案各有优势, 我们选择了第一种思路进行了具体实现, 源码可见 rock-admin/form

更多 vForm 的使用样例可以在具体文档 rock-admin-doc/form 种找到.

为省一分力, 宁下十分功, 将偷懒进行到底...