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

<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>

成果

目前应用再多个系统

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

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

您可能感兴趣的文章:

• Vue表单类的父子组件数据传递示例
• 使用Vue动态生成form表单的实例代码
• 详解vue表单——小白速看
• Vue.js 表单控件操作小结
• Vue.js实现可配置的登录表单代码详解
• vue axios 表单提交上传图片的实例
• Vue.js自定义事件的表单输入组件方法
• Vue+ElementUI实现表单动态渲染、可视化配置的方法
• vue中动态绑定表单元素的属性方法
• Vue 表单控件绑定的实现示例