Vue automated form instance analysis

This article shares with you the operation method of vue automation form and the related code description through examples. Friends who are interested can follow and learn.

Background

The B-side system has many forms, and the form may contain many fields
The form with many fields brings a large amount of HTML code
In large tracts of HTML, logic such as parameter binding and event processing is mixed, which is not conducive to maintenance
Technology stack Vue, Element (default form layout) is suitable for rapid development of mid- and back-end projects

Goal

Vue plugin that quickly generates forms through json configuration.

Design goal

1. Reduce html repeated fragments

2. The form field component is extensible

3. Events and linkages are decoupled through eventbus

4. Verification can be extended

5. Form layout can be customized

6. Visual configuration

About scheme design

##Usage

Installation

npm install charlie-autoform charlie-autoform_component_lib

Source code: https://charlielau.github.io/autoform/#/component/autoform

Introducing the plug-in

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

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

Basic use

demo.vue

<template>
 <p>
  <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>
 </p>
</template>
<script>
 export default {
 data() {
  return {
  model2: {
   name: &#39;&#39;,
   type: []
  },
  layout2: {
   align: &#39;left&#39;,
   labelWidth: &#39;100px&#39;,
   custom: false, //是否自定义布局
   inline: true //是否内联
  },
  fields2: [
   {
   key: &#39;name&#39;,
   type: &#39;input&#39;,
   templateOptions: {
    label: &#39;审批人&#39;
   }
   },
   {
   key: &#39;region&#39;,
   type: &#39;select&#39;,
   templateOptions: {
    label: &#39;活动区域&#39;,
    placeholder: &#39;请选择活动区域&#39;,
    options: [
    {
     label: &#39;区域一&#39;,
     value: &#39;shanghai&#39;
    },
    {
     label: &#39;区域二&#39;,
     value: &#39;beijing&#39;
    }
    ],
    validators:[ //校验
    // {required:true,message:&#39;必填&#39;}
    // ""
    ]
   }
   }
  ]
  };
 }
 };
</script>

Final Effect

Add a custom component or component directory

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

cHello.vue

// PATH:/components/autoform/cHello.vue
<template>
 <p>
  <p>
   <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>
  </p>
 </p>
</template>

<script>
 import {baseField} from "charlie-autoform";
 export default {
  mixins: [baseField],
  name: &#39;cHello&#39;,
  data () {
   return {};
  },
  methods: {},
  mounted(){
   //this.eventBus 事件总线
  }
 };
</script>

Achievements

Currently used in multiple systems

Qualitative: Reduced maintenance costs and separation of concerns

Quantitative: form development efficiency increased by 50%

Related recommendations:

Parent-child component data transfer example of Vue form class

The above is the detailed content of Vue automated form instance analysis. For more information, please follow other related articles on the PHP Chinese website!