为什么要做这个动态表单呢？
- 提高前端开发效率，是公司组件库中必不可少的一种组件。
- 提高自身对Vue组件的理解和代码封装能力。
演示
dyform.gif
使用
企业微信20210607-174353.png
设计思路
- 尽可能的通过json数据动态控制表单的内容、布局；
- 可动态插入自定义组件作为表单项
- 表单中所有IO项都能进行校验
- 同一个基础组件可以有多种展示形态
- 像使用原生组件一样配置表单数据，与监听基础组件触发事件
实现
- 对基础组件进行二次封装，同一组件根据传入的componentsType不同展示不同的形态。
- 使用
listeners对数据和事件进行透传达到使用基础组件与原生组件一致的效果
- 根据传入的json数据，动态双向绑定生成form所需的数据表单属性，实现统一校验功能
源码
如果觉的代码对您有用处请给个赞，谢谢大官人
iView组件二次封装
网友评论