vue2实现封装动态表单组件 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表单项的选择/填写结果
根据不同的分辨率每行可显示的表单项数量不同

动态表单封装请优先考虑风格二的封装方式

风格一
【vue2实现封装动态表单组件】特点简介
将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对单项数据流的检查报错

代码实现示例
动态表单组件

调用动态表单组件

.js-validate-form ::v-deep(.is-error .o-show-data) {color: red; }.demo-form ::v-deep(.el-form-item__label) {line-height: 1.6; display: inline-flex; height: 40px; justify-items: right; justify-content: flex-end; align-items: center; }.demo-form ::v-deep(.el-form-item__label .o-custom-label) {word-break: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */overflow: hidden; }

风格二 (推荐优先采用此风格)
特点介绍
通过函数组件，以jsx语法对el-form-item进行封装，仅封装模板代码部分，动态部分全部由调用者自行实现
优点：