关于el-dialog取消事件

再做一个表格数据的新增以及编辑当前行数据的时候遇到一个问题，因为两个功能用的是同一个弹出框(el-dialog)，考虑到编辑完成或者取消之后再次点击新建会有数据没有置空，开始我想的是在取消以及完成按钮的地方加上置空方法结果忽略了点击右上角的取消按钮(x)不置空

             <el-dialog                width="30%"                title="新增部门类型"                :visible.sync="innerVisible"                append-to-body            >                <el-form :model="typeform">                    <el-form-item label="类型名称" :label-width="formLabelWidth">                        <el-input v-model="typeform.name" autocomplete="off"></el-input>                    </el-form-item>                    <el-form-item v-show="idVisiable" label="id" :label-width="formLabelWidth">                        <el-input v-model="typeform.id" disabled autocomplete="off"></el-input>                    </el-form-item>                </el-form>                <div slot="footer" class="dialog-footer" @close="typeHandleClose">                    <el-button @click="cancelTypeAdd">取 消</el-button>                    <el-button :disabled="disableEdit" type="primary" @click="addTypeForm">确 定</el-button>                </div>            </el-dialog><el-dialog                width="30%"                title="新增部门类型"                :visible.sync="innerVisible"                append-to-body            >                <el-form :model="typeform">                    <el-form-item label="类型名称" :label-width="formLabelWidth">                        <el-input v-model="typeform.name" autocomplete="off"></el-input>                    </el-form-item>                    <el-form-item v-show="idVisiable" label="id" :label-width="formLabelWidth">                        <el-input v-model="typeform.id" disabled autocomplete="off"></el-input>                    </el-form-item>                </el-form>                <div slot="footer" class="dialog-footer" @close="typeHandleClose">                    <el-button @click="cancelTypeAdd">取 消</el-button>                    <el-button :disabled="disableEdit" type="primary" @click="addTypeForm">确 定</el-button>                </div>            </el-dialog>

在element中查询，我觉得应该是在如下图

在这个地方绑定置空方法结果不成功

我直接在新建之前绑定置空，这样也就更加的简便，但是x点击的解决方法还没有找到

   /**          * 添加编辑部门类型信息置空          */         initTypeForm() {             this.typeform.name = '';             this.typeform.id = '';         },         // 获取tag信息         getTagType(e) {             console.log(e);             this.form.organ = '';             this.form.organ = e.typeid;         },

转变思想，再新建界面弹出之前置空初始化界面

   /**          * 展示添加部门类型界面          */         addtype() {             this.initTypeForm();             this.innerVisible = true;             this.idVisiable = false;         },

View Code

关于el-dialog取消事件相关推荐

如何通过代码注册或取消事件？
winform通过代码注册或者是取消事件? this.FormClosing -= new System.Windows.Forms.FormClosingEventHandler(this.OnFo ...
jQuery事件2——off取消事件绑定
作用:取消事件的绑定,传参如下例先对div绑定两个点击事件,两个鼠标移出事件,效果如下代码 <!DOCTYPE html> <html lang="en"&g ...
picker 监听确定和取消事件
picker 监听确定和取消事件 <picker mode="multiSelector" @change="confirmHandling" @canc ...
微信不会把关注取消事件推送给服务器,微信公众平台开发关注及取消关注事件的方法...
微信公众平台开发关注及取消关注事件的方法,微信,公众,平台,开发,关注,及,取消,事件,的微信公众平台开发关注及取消关注事件的方法易采站长站,站长之家为您整理了微信公众平台开发关注及取消关注事件的 ...
原声js，取消事件冒泡，点击按钮，显示box,点击屏幕其他地方，box隐藏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
element UI 对话框编辑取消事件，当前行会清空或者替换掉bug解决
问题:如题element UI 对话框编辑取消事件,当前行会清空或者被替换掉,table表格里的编辑按钮打开对话框,关闭对话框,this.$refs.ruleForm.resetFields()不生效 ...
监听input type=file 文件上传取消事件
在做项目的时候,需要根据是否上传图片,(前提是已经上传文件,再次上传取消时,监听取消事件)进而判断页面变化.通过查阅相关资料,发现chane事件并不能监听取消,于是从另外一种角度:判断上传的文件是否有 ...
Vant- Dialog按钮确认和取消事件（配合van-swithc）
在H5项目中,使用van-swithc有时候要弹出Dialog确认,同时switch选择,取消时返回原来的状态有一个beforeClose,文档描述非常模糊,点确认按钮时也没有定义confirm和c ...
C#中窗口关闭时没有取消事件订阅导致事件重复执行的解决方法
场景 C#中委托与事件的使用-以Winform中跨窗体传值为例: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100150700 ...
一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'><div id="middle" oncli ...

关于el-dialog取消事件

关于el-dialog取消事件相关推荐

最新文章

热门文章