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

• 期望效果图：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 {
			//跟后台交互的form
			form: {
				//↓初始化数据，不写会报错
				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对象中一开始就有一组初始数据，所以需删除的数据下角标比自己定义的数组大1
				this.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 {
	 	// 不为空,请求接口
	 }
}
复制