【VUE】表单验证-

1.对象已经赋值 输入框提示为空解决 

在方法中已经给这个输入框绑定的属性值赋值后，提交仍然提示不能为空，其实数据已经更新到对象里了，只是页面没有渲染。

使用

this.$forceUpdate();

 进行强制更新，发现并不起作用，于是考虑到diff算法，可以通过定义key，当值发生变化是使Vue判断数据变化进而更新页面数据。

实现方法：

						<el-form-item
							:label="输入框label名"
							prop="propVlue"
							:key="timer"  //添加key值
						>
							<el-input
								v-model="form.xxx"
								clearable
								class="form-item-box"
								:disabled="true"
							>
							</el-input>
						</el-form-item>

在修改值的方法中添加：

this.timer = new Date().getTime();

2.表单内嵌套table 多选后数据已更新，但验证一直为空

 el-form中嵌套el-table 在列表中进行多选，先不多选数据，触发校验后再选择数据 再提交时一直提示不能为空

				<el-form
					ref="addForm"
					:model="form"
					:rules="rules"
					label-width="80px"
					label-position="top"
				>
					<el-row :gutter="30" class="diaLogFormArea">
						<el-col :xs="8" :sm="8" :md="6" :lg="6">
							<el-form-item label="选择数据" prop="Code">
								<el-select v-model="form.Code">
									<el-option
										v-for="item in codeSelect"
										:key="item.labelValue"
										:label="item.labelText"
										:value="item.labelValue"
									/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="设备选择" prop="deviceIds">
						<el-row :gutter="30">
							<el-table
								ref="deviceListTable"
								:data="deviceListData"
								@selection-change="handleSelectionChange"
								max-height="300px"
							>
								<el-table-column
									type="selection"
									width="220"
									align="center"
									prop="select"
									:selectable="selected"
								>
								</el-table-column>
								<template v-for="(item, index) in deviceColumns">
									<el-table-column
										:key="index"
										:index="index"
										:label="item.label"
										align="center"
										:prop="item.prop"
										:show-overflow-tooltip="true"
									>
										<template slot-scope="scope">
											<template v-if="item.render">
												<span>
													<RenderDom
														:row="scope.row"
														:index="index"
														:render="item.render"
													/>
												</span>
											</template>
											<template v-else>
												<span>{{ scope.row[item.code] }}</span>
											</template>
										</template>
									</el-table-column>
								</template>
							</el-table>
						</el-row>
					</el-form-item>
				</el-form>


	data() {
		const validateSelect = (rule, value, callback) => {
			if (this.form.deviceIds.length < 1) {
				callback(new Error('不能为空'));
			} else {
				callback();
			}
		};
		return {
			form: {
				Code: undefined,
				deviceIds: [],
			},
			rules: {
             				deviceIds: [
					{
						required: true,
						trigger: 'change',
						validator: validateSelect,
					},
				],
			},   
    }
}

		// 新增页面- 设备多选
		handleSelectionChange(val) {
			this.multipleSelection = [];
			val.forEach((item) => {
				this.multipleSelection.push(item.deviceId);
			});
			this.form.deviceIds = this.multipleSelection;
		},

通过自定义验证规则，并在rules中绑定即可