本篇文章通过实例给大家分享了vue自动化表单的操作方法以及相关的代码做了描述，有兴趣的朋友可以跟着学习下。
背景
b端系统表单较多，且表单可能含有较多字段
字段较多的表单带来了大片html代码
在大片html中，混杂着参数绑定、事件处理等逻辑，不利于维护
技术栈 vue，element(默认表单布局)适合中后台项目快速开发
目标
通过json配置快速生成表单的vue plugin。
设计目标
减少html 重复片段
表单字段组件可扩展
事件、联动通过eventbus 解耦
校验可扩展
表单布局可自定义
可视化配置
大概方案设计
使用
安装
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>
<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: '',
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>
<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: 'chello',
data () {
return {};
},
methods: {},
mounted(){
//this.eventbus 事件总线
}
};
</script>
成果
目前应用再多个系统
定性： 维护成本降低、关注点分离
定量：表单开发效率提升50%
相关推荐：
vue表单类的父子组件数据传递示例
以上就是vue自动化表单实例分析的详细内容。