vue中form表单点击一次添加一行，以及遇见的坑

效果图

表单代码

 <template v-for="(item, index) in ruleForm.driver"><el-form-item label="驾驶员姓名:" prop="driverName" style="margin-right: 20px"><!--<el-input v-model="ruleForm.driverName"></el-input>--><el-autocompleteclass="inline-input"v-model="ruleForm.driver[index].driverName":fetch-suggestions="querySearchDriver"placeholder="请输入驾驶员姓名"@select="handleDriver"></el-autocomplete></el-form-item><el-form-item label="驾驶员身份证号:" prop="driveridCardNo" style="margin-right: 20px"><el-input v-model="ruleForm.driver[index].driveridCardNo"></el-input></el-form-item><el-form-item label="从业资格证:" prop="driverLicenseNo" style="margin-right: 20px"><el-input v-model="ruleForm.driver[index].driverLicenseNo"></el-input></el-form-item><el-form-item label="驾驶员联系电话:" prop="driverTelephone" style="margin-right: 20px"><el-input v-model="ruleForm.driver[index].driverTelephone"></el-input></el-form-item><!-------------------------删除按钮-----------------------------------><el-button v-if="index == 0" type="primary" size="small" @click="addDriver">新 增</el-button><el-button v-if="index!=0" type="danger" size="small" @click="del(index)">删 除</el-button></template>

表单定义

 driver: [{}],//***重点注意***

这里有一个巨大的坑，刚开始表单里面就有人员信息，但是我没有定义，导致出了很多问题，正确的写法是

driver: [{driverName: '',//驾驶员driveridCardNo: '',driverLicenseNo: '',driverTelephone: ''}],

添加、删除代码

 //点击删除驾驶员信息del(index) {this.ruleForm.driver.splice(index, 1);},//点击添加驾驶员信息addDriver(){this.ruleForm.driver.push({driverName: '',driveridCardNo: '',driverLicenseNo: '',driverTelephone: ''});},