点击按钮增加列表

这个新增是一个组件，

• 所以他的值也都是从父组件传过来的，要用props来接收；

props: {
   	
   	form: {
   		type: Object,
   		default: () => ({
   			userId: '',
   			id: '',
   			code: '',
   			name: '',
   			type: '',
   			legalPerson: '',
   			bank: '',
   			bankAccount: '',
   			ein: '',
   			expirationTime: '',
   			businessLicense: null,
   			added: null,
   			otherMaterials: null,
   			status: '',
   			orgId: '',
   			delFlag: '0',
   			brands: [],
   			supplierBrands: [],
   			contacts: [{ id: '', name: '', phoneNum: '', position: '', email: '', isMajor: 0 }],
   			position: '',
   			province: '',
   			city: '',
   			county: '',
   			detailedAddress: '',
   			locationCode: '',
   		}),
   	},
   },

如图所示

<div v-for="(item, index) in form.contacts" :key="index" class="form-item-flex" style="border: 1px solid #eee">
<div class="title" style="padding-left: 30px">
<h3>{{ `联系人${index + 1}` }}</h3>
</div>
 
<el-form-item label="姓名">
<el-input label=" 联系人" v-model="item.name" placeholder="请输入姓名" maxlength="50" />
</el-form-item>
 
<el-form-item label="手机号" :prop="'phoneNum "  >
<el-input v-model="item.phoneNum" placeholder="请输入手机号"  />
</el-form-item>

<el-form-item label="主要联系人">
<el-radio-group v-model="item.isMajor" @change="onChangeMajor(item, index)">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>

</div>
<div class="add" style="margin-top: 20px">
<el-button type="primary" plain size="mini" icon="el-icon-plus" @click="addContact">增加</el-button>
</div>
</div>

• 是否设置为主要联系人

onChangeMajor(item, index) {
  let contacts = [...this.form.contacts]
	if (item.isMajor === 1) {
	contacts.forEach((item, i) => {
	if (i !== index) {
	item.isMajor = 0
		}
	})
	}
		},

• 新增联系人

 * @description: 增加联系人
		 * @param {*} data
		 * @return {*}
		 */

		addContact() {
			let obj = {}
			obj = {
				name: '',
				phoneNum: '',
				position: '',
				email: '',
				isMajor: 0,
			}
			this.form.contacts.push(obj)
		},