- A+
所属分类：Web前端
<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()
},
然后在弹窗关闭后就可以进行数据校验和文本清空
