Vue 自动化表单实例分析
Vue 自动化表单是指使用 Vue 框架实现的自动化表单解决方案，该解决方案能够快速生成表单，减少 HTML 代码，提高开发效率。以下是 Vue 自动化表单的知识点：
1. 背景：在 B 端系统中，表单较多且表单可能含有较多字段，这将带来大片 HTML 代码的维护问题。
2. 设计目标：通过 JSON 配置快速生成表单的 Vue 插件，目标是减少 HTML 重复片段、表单字段组件可扩展、事件、联动通过 eventbus 解耦、校验可扩展、表单布局可自定义、可视化配置。
3. 安装和使用：使用 npm 安装 charlie-autoform 和 charlie-autoform_component_lib 库，然后在 Vue 项目中引入插件，使用 AutoForm 组件快速生成表单。
4. 基本使用：在 Vue 组件中使用 AutoForm 组件，传入 model、fields 和 layout 等参数，快速生成表单。例如：
```html
<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>
```
5. 自定义组件：可以使用 Vue.$autoform.RegisterDir() 方法注册自定义组件目录，例如：
```javascript
Vue.$autoform.RegisterDir(() => require.context('./components/autoform', 'c'));
```
然后，在组件目录中创建自定义组件，例如 cHello.vue：
```html
<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 {
// ...
}
</script>
```
6. 事件处理：使用 eventbus 解耦，例如：
```javascript
this.$emit('submit', this.model);
```
7. 校验：使用 validators 对象实现表单校验，例如：
```javascript
validators: [
{ required: true, message: '必填' }
]
```
8. 表单布局：使用 layout 对象实现表单布局，例如：
```javascript
layout: {
align: 'left',
labelWidth: '100px',
custom: false, // 是否自定义布局
inline: true // 是否内联
}
```
这些知识点可以帮助开发人员快速实现自动化表单解决方案，提高开发效率和代码质量。
