Ant Design Vue 解决表单验证＋多选框引发的输入值不生效问题

开发环境

Vue 2

Ant-Design-Vue 1.7.1

问题复现

一个弹框组件采用了Ant Design Vue，包含一个多选框和一个输入框，整体格式为：

<a-form-model
 ref="ruleForm"
 :model="form"
 :rules="rules"
 :label-col="labelCol"
 :wrapper-col="wrapperCol"
>
	<a-form-model-item prop="nation">
     	<a-select
               mode="multiple"
               v-model="nation"
               :options="regionOptions"
               @change="onNationChange"
               style="width:600px;">
     	</a-select>
    </a-form-model-item>
    <a-form-model-item prop="bidFloor">
        <a-input v-model="form.bidFloor" type="number" style="width:600px;"/>
    </a-form-model-item>
</a-form-model>

rules: {
	country: [{ required: true, message: this.$t('mintAdNetwork.nationRegionErrorMessage'), trigger: 'change'}]
}

出现问题：当选择国家时，不管是否有选项都提示nation is required

而取消掉验证规则的required: true发现发送的接口信息里nation是有值的

可能会有疑问：这里为什么不用form.nation：因为Ant Design Vue 的多选框v-model必须绑定一级字段，否则出现无法特定情况下无法点击选项的bug 所以这里采用了nation这个中间值并且在onNationChange方法里对form.country进行赋值

但矛盾的是，prop的nation又是在form里找的

所以问题发现了：在prop的nation中找不到form

解决方法

将prop="nation"改成prop="country" 直接跳过中间值验证即可，注意规则里也应该对应修改

<a-form-model
 ref="ruleForm"
 :model="form"
 :rules="rules"
 :label-col="labelCol"
 :wrapper-col="wrapperCol"
>
	<a-form-model-item prop="country">
     	<a-select
               mode="multiple"
               v-model="nation"
               :options="regionOptions"
               @change="onNationChange"
               style="width:600px;">
     	</a-select>
    </a-form-model-item>
    <a-form-model-item prop="bidFloor">
        <a-input v-model="form.bidFloor" type="number" style="width:600px;"/>
    </a-form-model-item>
</a-form-model>

解决问题!!