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中绑定即可

3.判断指定el-form-item是否已通过校验

给指定form-item添加ref

							<el-form-item label="labelText" prop="itemProp" ref="inputRef">
								<el-input
									v-model.number="form.ipaidSn"
								/>
							</el-form-item>

添加方法判断,可在@blur或@input中添加

		chackeInputStatus() {
			if (this.$refs.inputRef.validateState !== 'error') {
				//校验通过
			} else {
				//校验未通过
			}
		},

4.手动触发指定字段的验证(验证通过后自动取消红色边框)

     // validateField方法第一个参数可以为Array或者String,定义需要校验的字段
     this.$refs['formName'].validateField(["resource"], (valid) => {
        if (!valid) {
            // 校验通过后的操作
            alert("校验通过");
        } else {
          console.log("校验失败");
          return false;
        }
      });

4.字段rules设置多个trigger

				itemName: [
					{
						required: true,
						message: '此项不能为空',
						trigger: ['blur', 'change'],
					},
				],

Logo

前往低代码交流专区

更多推荐