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

最新推荐文章于 2024-05-21 17:07:12 发布

gznyc

最新推荐文章于 2024-05-21 17:07:12 发布

阅读量882

点赞数 10

CC 4.0 BY-SA版权

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/gznyc/article/details/138217266

本文介绍了如何在ElementUI的el-dialog中添加用户表单，包括设置表单验证规则，如必填项和字符长度限制，并在关闭弹窗时重置表单数据以便清除用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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表单后之前输入的数据就清除