目前有一个需求，就是使用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 = true
this.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;
主要的解决方法就是用了同一个赋值的 方法，以前是分开的： this.myMethod(record.code, this.breakIndex)