|
<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需要實現(xiàn)表單彈窗關(guān)閉的時候重置需要添加一個prop香input傳替數(shù)據(jù)，也就是后端接口內(nèi)的數(shù)據(jù) -->
<!-- 清除驗證重要的幾個參數(shù) 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的驗證規(guī)則
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()
},
然后在彈窗關(guān)閉后就可以進行數(shù)據(jù)校驗和文本清空，點擊空白處，取消，關(guān)閉小按鈕都可以清空文本框，第二次打開這個form表單后之前輸入的數(shù)據(jù)就清除看，看不懂了先復(fù)制在編輯器內(nèi)再看，這樣容易看懂一點，網(wǎng)頁上的太亂了
轉(zhuǎn)載請標(biāo)明出處
|
|
|
