## 表单扩展
其实如果要很强的扩展，可以直接这样使用：此时如扩展所有 `formLabel` 可以为空，不需要扩展的可以写在 `formLabel` 里面
```
<component-form :width="80" :data="form">
<el-form-item label="提现金额" prop="extend1">
<el-input v-model='form.formFields.extend1' size="small" placeholder="输入提现金额,金额为正整数"/>
<p>当前可提现金额:50</p>
</el-form-item>
<el-form-item label="最高提现金额" prop="extend2">
<el-input v-model='form.formFields.extend2' size="small" placeholder="输入正整数,且>=起提金额"/>
<p>当前可提现金额:900000</p>
</el-form-item>
// .... 可随意扩展
<component-form>
# 数据结构
form:{
labelWidth:'150px',
labelPosition:'right',
formFields:{
extend1：'',
extend2:''
},
formLabel:[],
buttons:{
options:[
{title:'提交',type:'primary',size:'small',loading:false,click:(form,item) => {
}},
]
},
// rules:{
// name: [
// { required: true, message: '请输入活动名称', trigger: 'blur' },
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
// ],
// }
}
```
### 方式一
无需再写 el-form-item,只需要将` formLabel`种的 `type `属性改为 `slot`并设置 `slot名称，(如：slot:'formItem')`,即可，也是推荐使用的一种方式。还有一个值得一提的是：方式一表单顺便可以随意改变，方式二却不行，方式二要么开始位置，要么追到最后位置
需要注意的是：设置了 ```slot ```名称，别网络在``` form ```数据结构对象中的 ```formLabel```中对应的 属性上加上 ```slot：'slot名称'```,
```
<component-form :width="80" :data="form">
<!--========== 方式一 （推荐） ==========-->
<!-- 无需再写 el-form-item,只需要将 formLabel种的 type 属性改为 slot并设置 slot名称，(如：slot:'formItem'),即可使用 -->
<template slot="formItem">
<el-input v-model="form.formFields.extend"></el-input>
<span style="font-size: 12px;color: red">扩展表单提示</span>
</template>
<template slot="formItem1">
<el-input v-model="form.formFields.extend1"></el-input>
</template>
<template slot="formItem2">
<el-input v-model="form.formFields.extend2"></el-input>
</template>
</component-form>
```
数据结构
```
form:{
labelWidth:'200px',
inline:true,
labelPosition:'right',
formFields:{
extend:'扩展表单',
extend1:'扩展表单1',
extend2:'扩展表单2',
},
formLabel:[
{prop: 'id', title: '编号', type: 'text',tag:'span'},
{prop: 'name', title: '名称', type: 'input',disabled:false,prefixIcon:'el-icon-user',placeholder:'请输入姓名'},
{prop: 'nameLine', title: '同行显示', type: 'input',formItemStyle:{width:'500px'},style:{display:'inline-block',width:'100px',transform:'translateX(27px)'}},
{prop: 'password', title: '方式一扩展', type: 'slot',slot:'formItem'},
{prop: 'password', title: '方式一扩展1', type: 'slot',slot:'formItem1'},
{prop: 'password', title: '方式一扩展2', type: 'slot',slot:'formItem2'},
],
},
```
### 方式二
可以直接这样使用，注意 :`这里跟方式二不一样，这里必须写上 v-slot="{form}"`，既即可随意书写想要的内容，个人推荐使用，如下：这样的方式进行扩展
```
<component-form :width="80" :data="form">
<!-- 这样拿不到 form 表单对象，则不能进行表单验证提交 -->
<el-form-item label="扩展表单自定义提交验证" prop="extend">
<el-button >自定义表单提交验证</el-button>
</el-form-item>
</component-form>
```
如果想要拿到 ` element ui 的 form 表单对象，操作表单验证的时候用到`
```
<template v-slot="{form}">
<el-form-item label="扩展表单自定义提交验证" prop="extend">
<el-button @click="test(form)">自定义表单提交验证</el-button>
</el-form-item>
</template>
# 提交表单
test (form){
form.form.validate(valid => {
if (valid){
console.log('提交');
}else{
console.log('验证不通过');
}
}
}
```
也可以这样扩展：
```
<component-form :width="80" :data="form">
<!--========== 方式二 ==========-->
<!-- 添加到表单开始使用 formTop -->
<template v-slot:formTop="{formTop}">
<el-form-item label="自定义表单提交验证" prop="extend">
<el-button @click="test(formTop)">表单顶部显示</el-button>
</el-form-item>
</template>
<!-- form 默认追加到表单结尾，如添加到表单开始，可以使用 formTop -->
<template slot="form">
<el-form-item label="扩展表单1" prop="extend">
<el-input v-model="form.formFields.extend"></el-input>
</el-form-item>
<el-form-item label="扩展表单2" prop="extend">
<el-input v-model="form.formFields.extend"></el-input>
</el-form-item>
</template>
</component-form>
```
