欢迎光临
我的个人博客网站

element-ui监听el-dialog关闭事件

        <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()
        },
然后在弹窗关闭后就可以进行数据校验和文本清空

  

赞(1) 打赏
未经允许不得转载:张拓的天空 » element-ui监听el-dialog关闭事件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏