前言

后台需要的参数格式如下：

info=[{name:'',cardId:'',phone:''},{name:'',cardId:'',phone:''},{name:'',cardId:'',phone:''}]

由于后台参数的特殊性，每一行内容组成一个对象，如果这些对象都放到同一个form表单里面，由于每行对象的属性相同都是name、cardId、phone，同一个form表单无法区分，属性相同的将共享一个form值，即在【主任】的input输入【主任A 】，那么【委员】的input上也会显示【主任A 】，这样显然不对，只能设置每一行都是一个独立的form

由于form数量不确定，需要通过循环来增加，使用<a-from>写起来比较麻烦灵活性也非常差，所以后来改用<a-from-model>结合v-for，每个form的model通过对象.key值对应，具体实现如下

代码

<a-form-model v-for="(val, key, index) in unionMember" :key="index + 'unionMemberArr'" :model="unionMember[key]">
// unionMember是一个对象，循环该对象，key值是对象的属性名
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="form-group" :label="index == 0 ? '主任' : '委员'" :prop="[key].name">
                  <a-input v-model="unionMember[key].name" style="margin-right:8px" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item class="form-group" label="身份证" :prop="unionMember[key].cardId">
                  <a-input v-model="unionMember[key].cardId" style="margin-right:8px" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item class="form-group" label="手机号" :prop="unionMember[key].phone">
                  <div style="display:flex">
                    <a-input v-model="unionMember[key].phone" style="margin-right:8px" />
                    <a-button v-if="index != 0" @click="unionMemberDelete(index, 'union')">删除</a-button>
                  </div>

                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <a-button @click="unionMemberAdd('union')">增加委员</a-button>

unionMember: {//data中默认存在一个主任和一个委员
        'unionMemberForm0': { name: '', cardId: '', phone: '' },
        'unionMemberForm1': { name: '', cardId: '', phone: '' }
 },

//在methods中
//删除委员
 unionMemberDelete (index) {
     this.$delete(this.unionMember, 'unionMemberForm' + index)

    },
//增加委员
    unionMemberAdd () {
      let len = Object.keys(this.unionMember).length
        this.$set(this.unionMember, 'unionMemberForm' + len, { name: '', cardId: '', phone: '' })
      }