今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。 图如下: 大致就是图上的意思。 实现思路 ...
方案一：在父组件的el-dialog上设置destroy-on-close属性，每次关闭并重新打开时，组件都会销毁并重新创建，确保详情获取在每次打开时执行。 方案二：使用v-if="dialogVisible"，控制弹窗的显示隐藏，这样打开时会重新构建组件，关闭时销毁，确保详情获取的重新触发。 方案三：父组件中通过ref引用找到子...
--解决数据不更新的问题:v-if="dialogVisible",关闭和打开弹层,销毁和创建组件--><deptDialogv-if="dialogVisible":id="fatherId":origin-list="originList":is-edit="isEdit"@success="doSuccess"@doClose="dialogVisible=false"/></el-dialog> 解决方案三:在父组件中通过引用找到子组件 在父组件中,每次...
在toEdit方法中,将dialogVisible的值设为true之后,el-dialog正处于渲染中,在Mounted()生命周期之前,就将表单值赋值了,此时表单Mounted之后,就认为赋值后的为表单的初始值,而不是const formInfo声明处为初始值,而resetFields方法是将表单重置为初始值,就无法清空第一次编辑的数据。 解决办法 const toEdit = (item: ...
在关闭dialog时,我们通常需要对其中的form表单进行清除,如果dialog内部存有组件,也需要对其重置清空 如下列代码中,dialog中有一个form表单,有一个自定义组件 一、通过@close绑定dialog关闭方法closeFun() 二、通过@open绑定dialog开启方法openFun() 三、给自定义组件绑定v-if 判定 ...
通常会有需求点击叉号清空数据但是elementUI中叉号只是一个关闭的作用,怎么解决呢? <el-dialog title="团课课时编辑":visible.sync="editLeagueClassFlaga"@close="closeDialog"> </el-dialog> closeDialog(){this.xxx ='';//清空数据} 可以了就是这个@close="closeDialog" ...
Dialog 组件有个关闭时的回调函数close: //关闭dialog,重置表单 resetRegisterForm(){ //得到表单实例,并调用表单重置方法resetFields() this.$refs.registerFormRef.resetFields(); } 1. 2. 3. 4. 5. 表单重置生效必备条件(不注意就会入坑): 1、el-form定好属性ref; ...
如果你是新增和编辑的复用弹窗的情况,你想让打开的弹窗表单数据重置,尤其是想要清空表单数据,当你在关闭弹窗的使用resetFields(),你点击编辑在打开弹窗的时候把数据传入,再点击新增,那么这时候就新增弹窗内还是会显示之前编辑时的数据,感觉resetFields好像不生效,实际正确使用方法应该是先让弹窗打开this.dialogShow = true...
通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialogtitle="标题":visible.sync="bind"size="small"@close='closeDialog'></el-dialog> AI代码助手复制代码 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件closeDialog(){this.xxx='';//清空数据}, ...