ant design a-form使用_提交和保存事件

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

注意事项：

1.使用a-form 时，一定要先声明 :form=‘form’,然后在创建form,否则form自带的一些方法会不能使用

data () {
    return {
      form2: this.$form.createForm(this, { name: 'formUse' })
    }
  },
1
2
3
4
5

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>
1
2
3
4
5

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
        }
      })
1
2
3
4
5
6
7
8
9
10
11
12
13

4.表单数据清空

#不传参数则清空所有表单
 that.form2.resetFields([
        'name2','name3'
      ])
1
2
3
4