关于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;         },