iview+vue.js之Modal裏使用Form進行表單驗證

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='' ''