iview+vue.js之Modal里使用Form进行表单验证
踩坑1:点击确认按钮Modal框自动关闭,即使在@on-ok
的方法里将v-model中的变量设为true也阻止不了。尝试过给Modal添加属性loading后,点击确定按钮对话框不会自动消失,但终究觉得不太妥。
解决:使用slot自定义底部按钮
<div slot="footer">
<Button type="text" size="large" @click="addUserModal=false">取消</Button>
<Button type="primary" size="large" @click="add('addForm')">确定</Button>
</div>
踩坑2:表单验证select时候验证失败的问题
解决:因为iview默认校验数据类型是string,而我的select用的vuale是number类型。
修改:
roleId: [
{required: true, message: '请选择角色', trigger: 'change',type:'number'}
],
loginStatus: [
{required: true, message: '请选择状态', trigger: 'change',type:'number'}
]
注:
1.给 Form 设置属性 rules
2.给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop='' ''