<el-dialog title="添加用戶" @close="handleClose" :visible.sync="dialogVisible" width="50%">
<el-form :rules="editFormRuls" :model="yonhu" ref="editFormRef" label-width="100px">
<el-form-item label="用戶ID" prop="roleId">
<!-- prop需要實現表單彈窗關閉的時候重置需要添加一個prop香input傳替數據，也就是后端接口內的數據 -->
<!-- 清除驗證重要的幾個參數 ref prop :model v-model -->
<el-input v-model="yonhu.roleId"></el-input>
</el-form-item>
<el-form-item label="角色名稱" prop="roleName">
<el-input v-model="yonhu.roleName"></el-input>
</el-form-item>
<el-form-item label="角色描述" prop="roleDesc">
<el-input v-model="yonhu.roleDesc"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="Adduser">確 定</el-button>
</span>
</el-dialog>
在el-dialog中添加一個屬性 @close="handleClose"，然后在到el-form 里面添加editFormRuls進行表單的驗證，再綁定一個ref="editFormRef"，隨后在data中寫上editFormRuls的驗證規則
editFormRuls:{
roleId:[
{required:true,message:'請輸入用戶的ID',trigger:'blur'},
{min:3,max:10,message:'用戶名的ID在3到10字符之間'}
],
roleName:[
{required:true,message:'請輸入用戶角色名稱',trigger:'blur'},
{min:3,max:10,message:'用戶名的長度在3到10字符之間'}
// trigger失去焦點的時候驗證
],
roleDesc:[
{required:true,message:'請輸入用戶角色描述',trigger:'blur'},
{min:3,max:10,message:'用戶名的長度在3到10字符之間'}
// trigger失去焦點的時候驗證
]
}
這里驗證完成后在methods中寫入
handleClose(){
this.$refs.editFormRef.resetFields()
},
然后在彈窗關閉后就可以進行數據校驗和文本清空，點擊空白處，取消，關閉小按鈕都可以清空文本框，第二次打開這個form表單后之前輸入的數據就清除看，看不懂了先復制在編輯器內再看，這樣容易看懂一點，網頁上的太亂了
轉載請標明出處