el-table动态列实现表单校验功能

实现效果如下图所示 实现一个el-table表格 对表格填写的数据进行表单校验。当校验通过，要将上次校验不通过的提示也取消。校验不通过时，给出当前校验项提示 主要代码为：

	<el-form ref="tableFormRef" class="pro-table" :model="curData.ppmpProgressList">
			<el-table
				v-show="tab === 'progress' && activePage === '项目档案'"
				ref="tableRef"
				:data="curData.ppmpProgressList"
				stripe
				border
				:span-method="objectSpanMethod"
				height="520px"
				style="margin-bottom: 10px"
			>
				<template v-for="(col, index) in columns">
					<el-table-column v-if="col.children" :key="col.prop" :prop="col.prop" :label="col.label" header-align="center">
						<el-table-column
							v-for="co in col.children"
							:key="co.prop"
							:prop="co.prop"
							:label="co.label"
							:min-width="co.minWidth"
							header-align="center"
						>
							<template #default="{ row, $index }">
								<el-input-number v-if="co.prop === 'progress'" v-model="row[co.prop]" :controls="false" />
								<el-form-item
									v-else
									style="width: 100%"
									:prop="'curData.ppmpProgressList.' + $index + '.' + co.prop"
									:rules="{
										required: false,
										trigger: 'change',
										validator: (rule, value, callback) => {
											if (co.prop === 'actualEndTime' && moment(row.actualEndTime).isBefore(row['actualStartTime'])) {
												callback(new Error('结束时间不能小于开始时间'));
											} else if (co.prop === 'plannedEndTime' && moment(row.plannedEndTime).isBefore(row['plannedStartTime'])) {
												callback(new Error('结束时间不能小于开始时间'));
											} else if (co.prop === 'actualStartTime' && moment(row.actualEndTime).isBefore(row['actualStartTime'])) {
												callback(new Error('开始时间不能大于结束时间'));
											} else if (co.prop === 'plannedStartTime' && moment(row.plannedEndTime).isBefore(row['plannedStartTime'])) {
												callback(new Error('开始时间不能大于结束时间'));
											} else {
												let cprop = '';
												if (co.prop === 'actualEndTime') {
													cprop = 'curData.ppmpProgressList.' + $index + '.' + 'actualStartTime';
												}
												if (co.prop === 'actualStartTime') {
													cprop = 'curData.ppmpProgressList.' + $index + '.' + 'actualEndTime';
												}
												if (co.prop === 'plannedStartTime') {
													cprop = 'curData.ppmpProgressList.' + $index + '.' + 'plannedEndTime';
												}
												if (co.prop === 'plannedEndTime') {
													cprop = 'curData.ppmpProgressList.' + $index + '.' + 'plannedStartTime';
												}
												if (cprop) {
													// console.log(8888, cprop);
													tableFormRef.clearValidate([cprop]);
												}
												callback();
											}
										},
									}"
								>
									<!-- v-else -->
									<el-date-picker
										size=""
										style="width: 100%"
										:value-format="'YYYY-MM-DD'"
										v-model="row[co.prop]"
										type="date"
										@change="computedProgress(row)"
									/>
								</el-form-item>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column
						v-else
						:key="index"
						:prop="col.prop"
						:label="col.label"
						:fixed="col.fixed"
						:min-width="col.minWidth"
						header-align="center"
						align="center"
						:show-overflow-tooltip="true"
					>
						<template #default="{ row }">
							<el-input-number v-if="col.prop === 'sortOrder'" v-model="row[col.prop]" :controls="false" />
							<el-input v-else-if="col.prop === 'responsiblePerson' || col.prop === 'stageTask'" v-model="row[col.prop]" />
							<span v-else>{{ row[col.prop] }}</span>
						</template>
					</el-table-column>
				</template>
				<el-table-column label="操作" width="60px" align="center" fixed="right" v-if="isAdmin">
					<template #default="{ row, $index }">
						<el-button
							type="primary"
							link
							:disabled="groupData && groupData[row.stageName] && groupData[row.stageName].length <= 1 ? true : false"
							@click="deleteRow(row, $index)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-form>