uniapp自增表单项

• 业务需求：某一表单项分为两个或多个输入框，两个或多个为一组，可以以组为单位，根据客户意愿自增或删除。

• 期望效果图：1、页面初始时【主要检测设备】只有一行，需填入两项，设备名称和台数。
  
  2、点击新增按钮后，自动新增一组，此后每点击一次新增皆在最后新增一组。
  
  3、点击某组最右侧【删除】，即可删除掉这一组表单项。
  
  

• 技术：uniapp，uview（UI框架），JS

• 代码实现

<u-form-item label="主要检测设备"><view class=""><view class="renzheng-input-box"><u-input maxlength="25" v-model="form.gwPartsDetectionList[0].deName" :custom-style="customStyle"placeholder="请输入设备名称" /><u-line direction="col" /><u-input v-model="form.gwPartsDetectionList[0].deAmount" :custom-style="customStyle"placeholder="台数" type="number" /></view><!-- 主要检测设备自增表单项 --><!-- 注意这里，输入框绑定的v-model是跟后台交互用的form对象中的值，但v-for遍历的数组是另外定义的otherDetectionList --><view class="renzheng-input-box u-margin-top-10" v-for="(domain, index) in otherDetectionList":key="domain.key"><u-input maxlength="25" v-model="form.gwPartsDetectionList[index+1].deName" :custom-style="customStyle"placeholder="请输入设备名称" /><u-line direction="col" /><u-input v-model="form.gwPartsDetectionList[index+1].deAmount" :custom-style="customStyle"placeholder="台数" type="number" /><view class="form-remove-other" @click="removeOtherDetection(domain)">删除</view></view><!-- 主要检测设备自增表单项结束 --><view class="form-add-other" @click="addOtherDetection">新增</view></view>
</u-form-item>

export default {data(){return {//跟后台交互的formform: {//↓初始化数据，不写会报错gwPartsDetectionList: [{deName: '',deAmount: ''}],//让前端界面遍历用的数组otherDetectionList: [],}}},methods:{// 主要检测设备addOtherDetection() {this.otherDetectionList.push({value: '',key: Date.now()//放入一个key作为唯一标志，方便后期删除时查找此条数据});this.form.gwPartsDetectionList.push({deName: '',deAmount: ''})},removeOtherDetection(item) {var index = this.otherDetectionList.indexOf(item)if (index !== -1) {this.otherDetectionList.splice(index, 1)//因为form对象中一开始就有一组初始数据，所以需删除的数据下角标比自己定义的数组大1this.form.gwPartsDetectionList.splice(index + 1, 1)}}}
}

校验：每一组中都没有空值则校验通过

// 表单自增项校验
checkrequset(checkList) {let boolean = checkList.every(o => Object.keys(o).every(i => o[i]))return boolean;
},
submit(){if (!this.checkrequset(this.form.gwPartsDetectionList)) {// 为空this.$refs.uToast.show({title: '有未完成的项，请填写或删除',type: 'error',})} else {// 不为空,请求接口}
}