问题:iview 的 Select 下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过
html代码:
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
<FormItem label="版本信息:" prop="typeId">
<Select v-model="FormData.typeId" placeholder="请选择" style="width:40%;">
<Option
v-for="item in select4"
:key="item.value"
:label="item.label"
:value="item.value">
</Option>
</Select>
</FormItem>
</Form>
获取数据:
select4: [
{
value: 1,
label: 'V1版本'
},
{
value: 2,
label: 'V2版本'
}
],
验证规则:
ruleValidate: {
typeId: [
{ required: true, message: '请选择版本信息', trigger: 'change' }
]
}
查看 iview 的文档规,发现 iview 默认校验数据类型为 String,而我的 select 用的 value 是 number 类型的,所以校验添加 type 类型,所以最后验证代码应该写成下面这种:
ruleValidate: {
typeId: [
{ required: true, type: 'number', message: '请选择版本信息', trigger: 'change' }
]
}
注意:这个问题只针对动态获取的数据,如果是自定义的,可以改数据类型改为 String类型:
select4: [
{
value: '1',
label: 'V1版本'
},
{
value: '2',
label: 'V2版本'
}
],
这样不加 type 验证规则,也是可以通过的。

在使用IView的Select组件时,遇到数据验证问题,当Select的value为number类型时,验证规则默认为字符串类型导致校验失败。解决办法是在验证规则中添加`type:'number'`,确保与数据类型匹配。对于动态获取的数据,需确保value为number类型,否则可将数据类型转换为字符串以适应默认验证规则。
1万+

被折叠的 条评论
为什么被折叠?



