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表单后之前输入的数据就清除看，看不懂了先复制在编辑器内再看，这样容易看懂一点，网页上的太乱了

 

转载请标明出处