vue2实现封装动态表单组件

目录

• 封装组件注意点
• 动态表单动态控制的是什么？
• 动态表单封装
• 风格一
• 风格二 (推荐优先采用此风格)

封装组件注意点

• 不要为了封装而封装
• 只封装不变的部分，将变化的部分通过slot或其他方式，暴露出去，交给调用者实现
• 为了提供封装组件的复用率，优先封装为UI组件，而不是封装为业务组件（即：封装组件内部使用到的数据，都通过prop获取，而不是直接通过ajax请求或vuex中获取）

动态表单动态控制的是什么？

已知的需要动态控制的场景：

• 在A界面显示：A, B, C三个表单项，B界面显示：A,B,E,F三个表单项
• 在A界面默认显示：A，B两个表单项，当A项的值为x时，C表单项才显示出来
• 在A界面默认显示：A，B，C三个表单项，A,B默认可用，C默认禁用，当A项的值为x时，C表单项才可用
• 在A界面B表单项可选择的值，依赖于A表单项的选择/填写结果
• 根据不同的分辨率每行可显示的表单项数量不同

动态表单封装

请优先考虑风格二的封装方式

风格一

特点简介

将el-form, el-form-item, el-input等等完全封装到动态表单组件内，通过for循环来刷表单项，外部通过传json配置对象的方式，完成字段的动态显示/隐藏控制。

优点：

• 减少了 这类代码的重复编写
• 可以轻易的改变表单项的先后顺序

缺点：

• 如果所有用到表单的地方，都用这一个表单组件实现，那么这个组件后期一定会变得非常庞大，充斥大量的逻辑控制代码，导致后期难以维护
• 要想最大程度的保留原始表单的配置和事件，那就需要使用v-bind=attrs和v-on=evts方式进行配置，这相对于template语法来说，json对象的配置方式，就没那么让vue开发者习惯了。
• 通过v-bind=attrs方式设置原组件的属性，那么如果想设置一些默认值就变得麻烦起来，因为vue2中，设置了v-bind=attrs之后，没法再在模板中设置默认属性，必须在这个封装的组件中，在获取到配置对象时，进行一些比较繁琐的初始值设置。
• 如果表单model对象是通过prop传入，那么表单内部修改这个表单对象需要做特殊处理，来规避eslint对单项数据流的检查报错

代码实现示例

动态表单组件

调用动态表单组件

风格二 (推荐优先采用此风格)

特点介绍

通过函数组件，以jsx语法对el-form-item进行封装，仅封装模板代码部分，动态部分全部由调用者自行实现

优点：

• 能够针对界面特点，仅封装不变的模板代码部分，能够最大程度保留template编程风格
• 因为表单项都是通过slot实现，不会导致这个表单组件随着应用的场景增多和变得越来越复杂，复杂度会基本保持不变

缺点：

• 需要掌握jsx语法（jsx仅用于封装组件，调用这个组件使用template语法即可）

代码实现示例

表单项组件封装

代码调用示例

到此这篇关于vue2实现封装动态表单组件的文章就介绍到这了,更多相关vue封装表单组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！