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()
        },
然后在弹窗关闭后就可以进行数据校验和文本清空,点击空白处,取消,关闭小按钮都可以清空文本框,第二次打开这个form表单后之前输入的数据就清除看,看不懂了先复制在编辑器内再看,这样容易看懂一点,网页上的太乱了
 
转载请标明出处

  

(0)

相关推荐