当前位置：首页 > news >正文

ant-design a-from-model的校验

news 2025/8/14 15:24:52

目前有一个需求，就是使用ant-desing for vue 1.7.8版本的框架做一个表单，但是在过程中出现了Bug，现在想要记录下来：
遇到的bug：我有一个下拉框，这个下拉框旁边有一个选择的弹出框，在弹出框点击确认后，可以赋值到下拉框，下拉框也可以选择，但是有一个bug，那就是如果我先在弹出框选择了，并且赋值了，这个时候我再在下拉框选择，会出现校验不通过，会有一个提示。后面修复了。

一、VUE 代码

我这里使用的a-form-model的表单，并且使用了循环

<div v-for="(form, formIndex) in formDataList" :key="form.tid" class="problem_form_wrapper"><div style="margin-bottom: 15px;text-align: right;"><a-button class="delete_btn" type="primary" @click="handleDelete(form.tid)" icon="delete">删除问题</a-button></div><div class="table-page-search-wrapper"><a-form-model :model="form" :ref="`form_${form.tid}`" layout="inline"><a-input v-decorator.trim="['planCode', planCode]" type="hidden"></a-input><a-input v-decorator.trim="['issuesId', form.issuesId]" type="hidden"></a-input><a-row :gutter="30" style="margin-bottom: 10px;"><a-col :span="12"><a-form-model-item label="问题编号：" :rules="{ required: true, message: '请输入问题编号' }" prop="issuesCode"><a-input v-model="form.issuesCode" :allowClear="true" :disabled="true"> </a-input></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="问题类别：" :rules="{ required: true, message: '请选择问题类别' }" prop="issuesTypeVal"><a-cascader v-model="form.issuesTypeVal" :options="groups" placeholder="请选择问题类别" clearable /></a-form-model-item></a-col></a-row><a-row :gutter="30" style="margin-bottom: 10px;"><a-col :span="12"><a-form-model-item label="隐患等级：" :rules="{ required: true, message: '请选择隐患等级' }"prop="hiddenLevelVal"><a-cascader v-model="form.hiddenLevelVal" :options="hiddenLeveOptions" placeholder="请选择隐患等级"@change="onChange($event, formIndex)" clearable /></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="问题所属单位："><a-select v-model="form.issuesDepm" placeholder="请选择问题所属单位"><a-select-option v-for="item in issuesUnit" :key="item.value" :value="item.value">{{item.label}}</a-select-option></a-select></a-form-model-item></a-col></a-row><a-row :gutter="30" style="margin-bottom: 10px;"><a-col :span="12"><a-form-model-item label="是否违章：" :rules="{ required: true, message: '请选择是否违章' }" prop="isBreak"><a-radio-group v-model="form.isBreak"><a-radio value="0">否</a-radio><a-radio value="1">是</a-radio></a-radio-group></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="违章代码：":rules="{ required: form.isBreak == '1', message: '请选择违章代码', trigger: ['change', 'blur'] }"prop="violationsCoding"><a-select style="width: 70%;" :options="viotionOptions" showSearch@select="(value) => onSelect(value, formIndex)" v-model="form.violationsCoding" placeholder="请选择":filterOption="filterOption"></a-select><a @click="openCode(formIndex)" style="margin-left: 20px">快速查找</a></a-form-model-item></a-col></a-row><a-row :gutter="30" style="padding-bottom: 60px;"><a-col :span="12"><a-form-model-item label="违章类型："><a-input v-model="form.violationsType" :disabled="true" placeholder="请输入违章类型"></a-input></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="违章现象："><a-textarea v-model="form.violationsPhenomena" :disabled="true" placeholder="请输入违章现象" :rows="3" /></a-form-model-item></a-col></a-row><a-row :gutter="30" style="padding-bottom: 90px;"><a-col :span="12"><a-form-model-item label="问题描述：" :rules="{ required: true, message: '请填写问题描述' }"prop="issuesDescriptions"><a-textarea v-model="form.issuesDescriptions" placeholder="请输入问题描述" :rows="4" /></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="整改建议：" :rules="{ required: true, message: '请填写整改建议' }" prop="suggest"><a-textarea v-model="form.suggest" placeholder="请输入整改建议" :rows="4" /></a-form-model-item></a-col></a-row><a-row :gutter="30" style="margin-bottom: 10px;"><a-col :span="12"><a-form-model-item label="计划完成时间：" :rules="{ required: true, message: '请填写计划完成时间' }"prop="completeTime"><a-date-picker v-model="form.completeTime" placeholder="请选择计划完成时间" format="YYYY-MM-DD"valueFormat="YYYY-MM-DD" style="width: 100%;" /></a-form-model-item></a-col></a-row><a-row :gutter="30" style="margin-bottom: 60px;"><a-col :span="24"><a-form-model-item label="检查图片：" prop="imagePath"><a-upload :ref="'upload' + formIndex" name="file" :action="uploadAction" :headers="tokenHeader"multiple list-type="picture-card" :defaultFileList="form.imageList" @preview="handlePreview"@change="function (info) { handleUploadChange(info, form.tid, formIndex) }":remove="function (info) { handleRemove(info, form.tid) }" :uploadMessage="'只支持图片格式'":accept="'.jpg,.png,.dwg,.jpeg,.gif,.bmp,.tiff,.svg'" :before-upload="beforeUpload"><div v-if="form.imagePath.length < 255"><a-icon type="plus" /><div class="ant-upload-text">上传<br> <span style="font-size: 12px">(可以上传多张图片)</span> </div></div></a-upload></a-form-model-item></a-col></a-row><!-- 违章现象选择弹窗 --><a-modal :visible="breakRuleVisibleCode" :footer="null" @cancel="handleCancelBreakRuleAddCode" width="60%"title="关联违章"><div class="table-page-search-wrapper"><a-form layout="inline"><a-row :gutter="24"><a-col :md="18" :sm="8"><a-form-item label="违章现象"><a-input placeholder="请输入违章现象" v-model="regulations"></a-input></a-form-item></a-col><span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"><a-col :md="6" :sm="24"><a-button type="primary" @click="onSelectRegulations(true)">查询</a-button><a-button style="margin-left: 8px" @click="onSelectRegulations(false)">重置</a-button></a-col></span></a-row></a-form></div><a-table ref="table" size="middle" rowKey="id" :columns="vcolumns" :dataSource="viotionRecords":bodyStyle="{ maxHeight: '500px', overflow: 'auto' }" :scroll="{ y: 500, x: '100%' }":virtual="false"><span slot="action" slot-scope="text, record"><a-button key="back" @click="handleCancelBreak(record, breakIndex)"> 选择 </a-button></span></a-table></a-modal><a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelPreview"><img style="width: 100%" :src="previewImage" /></a-modal></a-form-model></div></div>

我上面的代码直接复制的，懒得删减。

二、方法

 //点击搜索弹出违章类型搜索openCode(index) {this.breakRuleVisibleCode = truethis.breakIndex = index},onSelect(value, index) {this.myMethod(value, index);const formRef = this.$refs[`form_${this.formDataList[index].tid}`];},myMethod(value, index) {let newData = this.viotionRecords.filter(item => item.code === value)[0];this.$set(this.formDataList[index], 'violationsCoding', value);this.$set(this.formDataList[index], 'violationsType', newData.violationsType);this.$set(this.formDataList[index], 'violationsPhenomena', newData.regulations);this.$nextTick(() => {const formRef = this.$refs[`form_${this.formDataList[index].tid}`]?.[index];formRef.clearValidate('violationsCoding')});this.$forceUpdate()},handleCancelBreak(record, index) {this.myMethod(record.code, this.breakIndex)this.breakRuleVisibleCode = false;