关于使用antd2.0-vue 使用form表单验证下拉选项的值是数字类型不是字符串类型校验不通过原因记录!
首先是问题代码如下:
projectOptions:[
{
id:1,
label:'选项1',
value: 1
}
]
const rules = {
projectName: [
{
required: true,
message: '请选择项目',
trigger: 'change',
},
],
}
<a-form ref="formRef" :model="formData" :rules="rules" :labelCol="{ span: 4 }">
<a-form-item label="项目" name="projectName">
<a-select
v-model:value="formData.projectName"
placeholder="请选择项目"
allowClear
>
<a-select-option :key="item.id" v-for="item in projectOptions" :value="item.value">{{
item.label
}}</a-select-option>
</a-select>
</a-form-item>
</a-form>
这种情况下,执行校验结果如下:
此时值已经选上了,只不过value值是数字类型的2,对应的label是选项1,不理解为什么值都选上了,但是校验失败。校验结果打印出来也是有值的如下:
现在修改对应的value值数字类型的 2 为字符串类型 ‘2’ 时
<a-select
v-model:value="formData.projectName"
placeholder="请选择项目"
@change="projectNameChange"
allowClear
>
<a-select-option :key="item.id" v-for="item in projectOptions" :value="item.value + ''">{{
item.label
}}</a-select-option>
</a-select>
就可以校验成功:
就一个数据类型之差就校验失败,不知道为什么,所以在此记录以下,但是原因不解,有看到的小伙伴如果知道具体原因还望指明,本人才疏学浅,还望不吝赐教!感谢三连!