前言
后台需要的参数格式如下:
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: '' }) }
结果
可以获取值
标签:vue,name,form,unionMember,表单,ant,phone,cardId From: https://www.cnblogs.com/liuXiaoDi/p/17255422.html