vue自动化表单实例分析

背景

B端系统表单较多，且表单可能含有较多字段
字段较多的表单带来了大片HTML代码
在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护
技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发

目标

通过json配置快速生成表单的vue plugin。

设计目标

1. 减少html 重复片段

2. 表单字段组件可扩展

3. 事件、联动通过eventbus 解耦

4. 校验可扩展

5. 表单布局可自定义

6. 可视化配置

大概方案设计

使用

安装

源码：https://charlielau.github.io/autoform/#/component/autoform

引入插件

基本使用

demo.vue

最终效果

添加自定义组件或者组件目录

cHello.vue

成果

目前应用再多个系统

定性： 维护成本降低、关注点分离
定量：表单开发效率提升50%

相关推荐：

Vue表单类的父子组件数据传递示例

以上就是vue自动化表单实例分析的详细内容，更多请关注Gxl网其它相关文章！