|
<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需要實(shí)現(xiàn)表單彈窗關(guān)閉的時(shí)候重置需要添加一個(gè)prop香input傳替數(shù)據(jù)，也就是后端接口內(nèi)的數(shù)據(jù) -->
<!-- 清除驗(yàn)證重要的幾個(gè)參數(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中添加一個(gè)屬性 @close="handleClose"，然后在到el-form 里面添加editFormRuls進(jìn)行表單的驗(yàn)證，再綁定一個(gè)ref="editFormRef"，隨后在data中寫上editFormRuls的驗(yàn)證規(guī)則
editFormRuls:{
roleId:[
{required:true,message:'請(qǐng)輸入用戶的ID',trigger:'blur'},
{min:3,max:10,message:'用戶名的ID在3到10字符之間'}
],
roleName:[
{required:true,message:'請(qǐng)輸入用戶角色名稱',trigger:'blur'},
{min:3,max:10,message:'用戶名的長(zhǎng)度在3到10字符之間'}
// trigger失去焦點(diǎn)的時(shí)候驗(yàn)證
],
roleDesc:[
{required:true,message:'請(qǐng)輸入用戶角色描述',trigger:'blur'},
{min:3,max:10,message:'用戶名的長(zhǎng)度在3到10字符之間'}
// trigger失去焦點(diǎn)的時(shí)候驗(yàn)證
]
}
這里驗(yàn)證完成后在methods中寫入
handleClose(){
this.$refs.editFormRef.resetFields()
},
然后在彈窗關(guān)閉后就可以進(jìn)行數(shù)據(jù)校驗(yàn)和文本清空，點(diǎn)擊空白處，取消，關(guān)閉小按鈕都可以清空文本框，第二次打開這個(gè)form表單后之前輸入的數(shù)據(jù)就清除看，看不懂了先復(fù)制在編輯器內(nèi)再看，這樣容易看懂一點(diǎn)，網(wǎng)頁(yè)上的太亂了
轉(zhuǎn)載請(qǐng)標(biāo)明出處
|
|
|
