antd vue 动态添加表单项_antd vue form动态添加表单项

业务背景

要对form表单的某一项进行动态添加、删除反填操作，见图，要操作的项为BPID，其余项都是固定的。

实现思路（关键点）

1. 首先要对BPID的每一项进行注册，使用v-decorator/getFieldDecorator
2. getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数，两个重要参数：
   2.1 options.preserve,表示：即便字段不再使用，也保留该字段的值
   2.2 required，是否必填

具体步骤

1. html部分

    <a-row :gutter="24" v-for="(k, index) in testArr" :key="index">
         <a-col :md="12" :sm="24">
              <a-form-item :label="index === 0 ? 'BPID' : ''" :required="true" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 ,offset: index>0?10:0 }">
                   <a-input v-decorator="[ testArr[index], {
                                                                           validateTrigger: ['change', 'blur'],
                                                                           rules: [
                                                                             {
                                                                               required: true,
                                                                               whitespace: true,
                                                                               message: testArr.length === 1?'Please input BPID':'Please input BPID or delete this field.',
                                                                             },
                                                                           ],
                                                                         },
                                                                       ]" placeholder />
            </a-form-item>
   	</a-col>
   	<a-col :md="6" :sm="24">
         <a-icon v-if="testArr.length > 1&&modalTitle!='VIEW'" class="dynamic-delete-button" type="minus-circle-o" @click="() => remove(index)" />
    	</a-col>
   </a-row>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

2. js 部分
   首先在data中定义 testArr: [’'wj0], //默认有一项

    add() {
        const item = this.testArr[this.testArr.length - 1]             //取数组的最后一项，默认是‘wj0’
        const maxNum = parseInt(item.replace('wj', '')) + 1     //去掉wj然后+1，这样保证新增的项始终不会和其他项重复，且有规律
        this.form.getFieldDecorator('wj' + maxNum, {
                   initialValue: '',
                   preserve: true                          //即便字段不再使用，也保留该字段的值，不设置这个属性，会导致删除错位的现象
         });
        this.testArr = this.testArr.concat('wj' + maxNum)		//将新增项拼接到数组中
    }
   1
   2
   3
   4
   5
   6
   7
   8
   9

   remove(k) {
        const deleteObj = this.testArr.splice(k, 1);
        const deleteItem = deleteObj[0]
        this.form.setFieldsValue({                      //给删除的那一项赋值为空
            [deleteItem]: ''
        });
        this.form.getFieldDecorator([deleteItem],{     //给删除的那一项设置为不必填，否则保存的时候过不去
            required: false
        });
   },
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   //保存
   handleSubmit() {
        this.form.validateFields((err, values) => {
              if (err) return
              this.confirmLoading = true;
              let str = '';
              if (this.testArr.length > 1) {
                    this.testArr.forEach((item, i) => {       //循环testArr，将里面的值字符串拼起来
                           if (i < this.testArr.length - 1) {
                               str = str + this.form.getFieldValue(item) + ','
                           } else {
                               str = str + this.form.getFieldValue(item)
                           }
                    })
              } else {
                  str = this.form.getFieldValue(this.testArr[0])
              }
                   let params = {}
                   for (let key in values) {
                       if (key.indexOf('wj') == -1) {
                           params[key] = values[key] //取其他项，如：name，source，desc
                       }
                   }
                   params.bpid = str
                   //处理完毕走接口
         })
   },
   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

   //打开模态框，给BPID赋值部分
   //add时
   this.form.getFieldDecorator('wj0', {
                   initialValue: '',
                   preserve: true
    });
   //edit
    const bpidArr = data.bpid.split(','); //值;
    this.testArr = [];
    bpidArr.forEach((item, index) => {
          this.testArr.push('wj' + index)
          this.form.getFieldDecorator('wj' + index, {
                 initialValue: item,
                 preserve: true
          });
   	})
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

3. css 部分看Ant Design of Vue form组建中的动态表单，我做了一点调整，这里就不贴出来了