iview 的 Select 下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过
html代码:
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100"> <FormItem label="版本信息:" prop="typeId"> <Select v-model="FormData.typeId" placeholder="请选择" style="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 验证规则,也是可以通过的。