1.vue代码
<a-card title="仓库2">
<a-form @submit="handleSubmit" :form="form2" class="form" v-model="test2">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="任务名" >
<a-input placeholder="请输入任务名称" v-decorator="[ 'name2', {rules: [{ required: true, message: '请输入任务名称', whitespace: true,min:3,max:5}]} ]" v-model="test2.name2" />
<!-- <a-input placeholder="请输入任务名称" />-->
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="任务描述">
<a-input placeholder="请输入任务描述" v-decorator="[ 'url2', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="执行人">
<a-select
placeholder="请选择执行人"
v-decorator="[
'owner2',
{rules: [{ required: true, message: '请选择执行人'}]}
]" >
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="责任人">
<a-select
placeholder="请选择责任人"
v-decorator="[
'approver2',
{rules: [{ required: true, message: '请选择责任人'}]}
]" >
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="提醒时间">
<a-time-picker
style="width: 100%"
v-decorator="[
'dateRange2',
{rules: [{ required: true, message: '请选择提醒时间'}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="任务类型">
<a-select
placeholder="请选择任务类型"
v-decorator="[ 'type2', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</a-card>
注意事项:
1.使用a-form 时,一定要先声明 :form=‘form’,然后在创建form,否则form自带的一些方法会不能使用
data () {
return {
form2: this.$form.createForm(this, { name: 'formUse' })
}
},
2.a-form 表单验证,a-form-item里面的组件定义 v-decorator 属性,具体结构参照下面的代码
<a-form-item
label="任务名" >
<a-input placeholder="请输入任务名称" v-decorator="[ 'name3', {rules: [{ required: true, message: '请输入任务名称', whitespace: true},{ message: '长度在3-5',min:3,max:5}]} ]" v-model="test2.name3" />
</a-form-item>
3. a-form获取表单值
1.如果使用了v-model,则直接获取值
test2.name3
2.使用 that.form2.getFieldsValue(['name3']) #这里的name3,即为 v-decorator里面定义的name3
若不传参数,则获取的是form2里面的所有值 that.form2.getFieldsValue()
3. validateFields 方法获取值,这里的values即为表单值,当你的表单定义了验证条件时,如果有表单验证不通过,err值则为false
this.form2.validateFields((err, values) => {
debugger
if (!err) {
console.log('Received values of form: ', values);
// do something
}
})
4.表单数据清空
#不传参数则清空所有表单
that.form2.resetFields([
'name2','name3'
])