vue自动化表单实例分析

背景

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

目标

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

设计目标

1. 减少html 重复片段
2. 表单字段组件可扩展
3. 事件、联动通过eventbus 解耦
4. 校验可扩展
5. 表单布局可自定义
6. 可视化配置

大概方案设计

使用

安装

npm install charlie-autoform charlie-autoform_component_lib

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

引入插件

import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';

Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);

基本使用

demo.vue

最终效果

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

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象

cHello.vue

// PATH:/components/autoform/cHello.vue

成果

目前应用再多个系统

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

源码：https://github.com/CharlieLau/autoform