【实习小tip】elementUI动态数组表单给每个子对象输入框增加校验规则、对象扁平化

elementUI动态数组表单给每个子对象输入框增加校验规则

效果如图

重点还是在el-form-item 组件上的 prop 属性的值必须和el-input等 组件上的 v-model 属性的值对应，然后再添加：rules字段添加规则

如：

<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.standardContext'" :rules="[{required: true,message: '请输入标准',trigger: 'blur'}]">
	<el-input v-model="item.standardContext" :data-list="[]"
		:maxlength="50" :readonly="isView"
		style="width:84.5%" placeholder="请输入标准(必填)"/>
</el-form-item>

全部代码：

<sp-form-group v-model="isCollapse['types']" name="分类标准" :add="isEdit"
							:clear="form.types && form.types.length > 1 && form.types.filter(row => row.isDeleted !== 1).length > 1  && isEdit"
							@add="clicktypesAdd()" @clear="clearSub(form.types, '分类标准')">
							<ul class="form-group-list">
								<template v-for="(tyItem, tyIdx) in form.types || []">
									<li v-if="tyItem.isDeleted != 1" :key="tyIdx" class="form-group-list-item"
										style="background: #f2f3f5">
										<div style="flex: 1;">
											<el-row :gutter="24">
												<el-col :md="16" :lg="16" :xl="16">
													<el-form-item label="标准分类" :prop="'types.' + tyIdx + '.typeName'" :rules="[{required: true,message: '请选择标准分类',trigger: 'blur'}]">
														<sp-select v-model="tyItem.typeName" :maxlength="255"
															placeholder="请选择分类(必填)" :readonly="isView">
															<el-option v-for="typeItem in Types || []"
																:value="typeItem.typeName" :key="typeItem.id"
																:label="typeItem.typeName"></el-option>
														</sp-select>
														<el-button icon="el-icon-plus" @click="clicktypesAdd()"
															v-if="isEdit">
														</el-button>
														<el-button type="primary" v-if="isEdit"
															@click="clickCateSmallItemAdd(tyIdx)">添加分类项目</el-button>
													</el-form-item>
												</el-col>
											</el-row>
											<template
												v-for="(casmaItem, cateIdx) in form.types[tyIdx].categoryItems || []">
												<el-row :gutter="24" :key="cateIdx">
													<el-col :md="12" :lg="12" :xl="12">
														<div v-if="isView">分类项目</div>
														<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.itemName'" :rules="[{required: true,message: '请输入分类项目',trigger: 'blur'}]">
															<sp-text v-model="casmaItem.itemName"
																placeholder="请输入分类项目(必填)" :maxlength="10" :precision="0"
																:size="formSize" :readonly="isView" />
														</el-form-item>
													</el-col>
													<el-col :md="9" :lg="9" :xl="9">
														<div v-if="isView">分值</div>
														<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.score'" :rules="[{required: true,message: '请输入分值',trigger: 'blur'}]">
															<sp-text v-model="casmaItem.score" :maxlength="10"
																style="width: 93%;" placeholder="请输入分值(必填)"
																:readonly="isView" />
														</el-form-item>
													</el-col>
													<el-col :md="1" :lg="1" :xl="1">
														<el-form-item>
														</el-form-item>
													</el-col>
													<el-col :md="2" :lg="2" :xl="2">
														<el-form-item>
															<el-button
																v-if="form.types[tyIdx].categoryItems.length != 1 && isEdit"
																circle icon="el-icon-delete-solid"
																@click="clickCateSmallItemDel(tyIdx, tyItem, cateIdx)"
																style="margin: 0%;"></el-button>
														</el-form-item>
													</el-col>
												</el-row>
												<div
													v-for="(item, i) in form.types[tyIdx].categoryItems[cateIdx].standards || []">
													<el-row :gutter="24" :key="i">

														<el-col :md="24" :lg="24" :xl="24">
															<div v-if="isView">标准</div>
															<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.standardContext'" :rules="[{required: true,message: '请输入标准',trigger: 'blur'}]">
																<sp-text v-model="item.standardContext" :data-list="[]"
																	:maxlength="50" :readonly="isView"
																	style="width:84.5%" placeholder="请输入标准(必填)"/>
																<el-button
																	v-if="form.types[tyIdx].categoryItems[cateIdx].standards.length != 1 && isEdit"
																	circle icon="el-icon-delete"
																	@click="clickStandardItemDel(tyIdx, cateIdx, tyItem, i)"
																	style="margin: 0%;"></el-button>
																<el-button circle icon="el-icon-plus" v-if="isEdit"
																	@click="clickStandardItemAdd(tyIdx, cateIdx)"
																	style="margin: 0%;"></el-button>
															</el-form-item>
														</el-col>
													</el-row>
												</div>
											</template>

										</div>
										<el-popconfirm placement="top-end" title="确定删除该条子表信息？" v-if="isEdit"
											@confirm="clicktypesDel(tyItem, tyIdx)">
											<el-link slot="reference" type="danger" style="margin-left: 30px;">删除
											</el-link>
										</el-popconfirm>
									</li>
								</template>
							</ul>
						</sp-form-group><sp-form-group v-model="isCollapse['types']" name="分类标准" :add="isEdit"
	:clear="form.types && form.types.length > 1 && form.types.filter(row => row.isDeleted !== 1).length > 1  && isEdit"
	@add="clicktypesAdd()" @clear="clearSub(form.types, '分类标准')">
	<ul class="form-group-list">
		<template v-for="(tyItem, tyIdx) in form.types || []">
			<li v-if="tyItem.isDeleted != 1" :key="tyIdx" class="form-group-list-item"
				style="background: #f2f3f5">
				<div style="flex: 1;">
					<el-row :gutter="24">
						<el-col :md="16" :lg="16" :xl="16">
							<el-form-item label="标准分类" :prop="'types.' + tyIdx + '.typeName'" :rules="[{required: true,message: '请选择标准分类',trigger: 'blur'}]">
								<sp-select v-model="tyItem.typeName" :maxlength="255"
									placeholder="请选择分类(必填)" :readonly="isView">
									<el-option v-for="typeItem in Types || []"
										:value="typeItem.typeName" :key="typeItem.id"
										:label="typeItem.typeName"></el-option>
								</sp-select>
								<el-button icon="el-icon-plus" @click="clicktypesAdd()"
									v-if="isEdit">
								</el-button>
								<el-button type="primary" v-if="isEdit"
									@click="clickCateSmallItemAdd(tyIdx)">添加分类项目</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<template
						v-for="(casmaItem, cateIdx) in form.types[tyIdx].categoryItems || []">
						<el-row :gutter="24" :key="cateIdx">
							<el-col :md="12" :lg="12" :xl="12">
								<div v-if="isView">分类项目</div>
								<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.itemName'" :rules="[{required: true,message: '请输入分类项目',trigger: 'blur'}]">
									<sp-text v-model="casmaItem.itemName"
										placeholder="请输入分类项目(必填)" :maxlength="10" :precision="0"
										:size="formSize" :readonly="isView" />
								</el-form-item>
							</el-col>
							<el-col :md="9" :lg="9" :xl="9">
								<div v-if="isView">分值</div>
								<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.score'" :rules="[{required: true,message: '请输入分值',trigger: 'blur'}]">
									<sp-text v-model="casmaItem.score" :maxlength="10"
										style="width: 93%;" placeholder="请输入分值(必填)"
										:readonly="isView" />
								</el-form-item>
							</el-col>
							<el-col :md="1" :lg="1" :xl="1">
								<el-form-item>
								</el-form-item>
							</el-col>
							<el-col :md="2" :lg="2" :xl="2">
								<el-form-item>
									<el-button
										v-if="form.types[tyIdx].categoryItems.length != 1 && isEdit"
										circle icon="el-icon-delete-solid"
										@click="clickCateSmallItemDel(tyIdx, tyItem, cateIdx)"
										style="margin: 0%;"></el-button>
								</el-form-item>
							</el-col>
						</el-row>
						<div
							v-for="(item, i) in form.types[tyIdx].categoryItems[cateIdx].standards || []">
							<el-row :gutter="24" :key="i">

								<el-col :md="24" :lg="24" :xl="24">
									<div v-if="isView">标准</div>
									<el-form-item :prop="'types.' + tyIdx + '.categoryItems.' + cateIdx + '.standardContext'" :rules="[{required: true,message: '请输入标准',trigger: 'blur'}]">
										<sp-text v-model="item.standardContext" :data-list="[]"
											:maxlength="50" :readonly="isView"
											style="width:84.5%" placeholder="请输入标准(必填)"/>
										<el-button
											v-if="form.types[tyIdx].categoryItems[cateIdx].standards.length != 1 && isEdit"
											circle icon="el-icon-delete"
											@click="clickStandardItemDel(tyIdx, cateIdx, tyItem, i)"
											style="margin: 0%;"></el-button>
										<el-button circle icon="el-icon-plus" v-if="isEdit"
											@click="clickStandardItemAdd(tyIdx, cateIdx)"
											style="margin: 0%;"></el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</template>
				</div>
				<el-popconfirm placement="top-end" title="确定删除该条子表信息？" v-if="isEdit"
					@confirm="clicktypesDel(tyItem, tyIdx)">
					<el-link slot="reference" type="danger" style="margin-left: 30px;">删除
					</el-link>
				</el-popconfirm>
			</li>
		</template>
	</ul>
</sp-form-group>

报错：Cause: java.sql.SQLSyntaxErrorException: Unknown column ‘full_user_name’ in ‘field list’

问了后端，是数据库这个字段没了

对象扁平化

参考文章

QualityManageApi.get(this.params.id).then((res) => {
	const data = res.data
	this.form = data
    //对象扁平化函数
	const flat = function(obj = {}, preKey = "", res = {}) {
	  //空值判断，如果obj是空，直接返回
	  if(!obj) return
	  //获取obj对象的所有[key,value]数组并且遍历，forEach的箭头函数中用了解构
	  Object.entries(obj).forEach(([key,value])=>{
		if(Array.isArray(value)){
		  //如果obj是数组，那么key就是数组的index，value就是对应的value
		  //obj是数组的话就用[]引起来
		  //因为value是数组，数组后面是直接跟元素的，不需要.号
		  let temp = Array.isArray(obj) ? `${preKey}[${key}]` : `${preKey}${key}`
		  flat(value,temp,res)
		}else if(typeof value === 'object'){
		  //因为value是对象类型，所以在末尾需要加.号
		  let temp = Array.isArray(obj) ? `${preKey}[${key}].` : `${preKey}${key}.`
		  flat(value,temp,res)
		}else{
		  let temp = Array.isArray(obj) ? `${preKey}[${key}]` : `${preKey}${key}`
		  res[temp] = value
		}
	  })
	  return res;
	}
	const form1 = flat(data)
	console.log(form1) 

效果：