基于vue自动化表单实践

背景

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

目标

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

设计目标

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

大概方案设计

使用

安装

npm install charlie-autoform  charlie-autoform_component_lib

使用文档: doc

！！！请忽略文档上方的开发指南

引入插件

import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);

基本使用

demo.vue

<template><div><auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout"><el-form-item class="clearfix"><el-button type="primary">立即创建</el-button><el-button>取消</el-button></el-form-item></auto-form></div>
</template>
<script>export default {data() {return {model2: {name: '',type: []},layout2: {align: 'left',labelWidth: '100px',custom: false,  //是否自定义布局inline: true   //是否内联},fields2: [{key: 'name',type: 'input',templateOptions: {label: '审批人'}},{key: 'region',type: 'select',templateOptions: {label: '活动区域',placeholder: '请选择活动区域',options: [{label: '区域一',value: 'shanghai'},{label: '区域二',value: 'beijing'}],validators:[   //校验// {required:true,message:'必填'}// ""]}}]};}};
</script>

最终效果

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

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

cHello.vue

// PATH:/components/autoform/cHello.vue
<template><div><div><p>基本的变量可以通过"mixins"获取，这里有开发组件需要的一些变量</p><p>自定义子组件：Hello</p><p>当前field: {{field}}</p><p>整个model: {{model}}</p><p>当前model: {{model[field.name]}}</p><p>layout: {{layout}}</p><p>字段相关配置to: {{to}}</p></div></div>
</template><script>import {baseField} from "charlie-autoform";export default {mixins: [baseField],name: 'cHello',data () {return {};},methods: {},mounted(){//this.eventBus  事件总线}};
</script>