今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。 图如下: 大致就是图上的意思。 实现思路 ...
在Vue.js中使用Element UI的<el-dialog>组件时,如果你希望在关闭对话框时完全销毁其内部的子组件,可以通过结合destroy-on-close属性和v-if指令来实现。以下是详细的步骤和解释: 1. 确认<el-dialog>关闭时的销毁需求 你需要明确在关闭<el-dialog>时,内部的子组件是否应该被完全销毁。这通...
今天后台给我提了个bug,页面中是一个列表,点击子项会弹一个对话框,在el-dialog中嵌套了el-table,滚动对话框中的列表的时候,关闭对话框后后,点击别的子项的时候上一次的滚动条位置被记录了。 当时想的是 把对象框重新渲染一下就行了,打开element文档果然有一个destroy-on-close属性设置为true,怎么都不生效。查...
一般情况下我们使用el-dialog时都会保留close事件处理函数,用于在关闭对话框时进行一些操作,例如清空表单数据等。 el-dialog的close事件原理主要涉及到两个部分:组件销毁和事件触发。 1. 组件销毁 需要明确的是,当我们关闭对话框时,el-dialog组件并没有被完全销毁,而是被隐藏了起来,并且在后续需要再次显示时可以通过v...
原因是关闭弹窗时,子组件被没有销毁,它只是隐藏了,也没有清空里面表单的数据 我们先来看问题一数据不更新 问题一:回显数据不更新 解决方案一:在父组件中,给父组件中的el-dialog添加destroy-on-close属性 查阅了 Dialog 对话框 相关文档: 我们可以给它加上这个属性 <el-dialog :title="isEdit?'编辑':'新增'...
1、关闭dialog的时候不销毁。重新打开然后影响页面的效果与样式。 原因: dialog的close()只是将html片段隐藏,并没有销毁移除。 解决方式: 打开dialog的时候在写onClose回调处理: onClose:function(){ $(this).dialog('destory').remove(); } 需要注意: ...
el-dialog打开一次之后,再次打开之前的数据不会销毁,依然存在。 我们需要在关闭后重新初始化数据。 重置表单的方法 this.$refs[formRef].resetFields(); 有些数据不是表单中的数据,也需要重置。 难道一个个的重新手动赋值吗?当然可以,就是比较麻烦。好在vue帮我们保存了一份原始数据,直接把data复制为原始数据即可...
如果不加destroy-on-close属性,当第一次打开该dialog时,我们可以从组件attachment的created中打印出一句话,关闭该dialog后,第二次打开时,就不会再打印该信息,证明对话框关闭后,内部组件依然存在,但是当加上destroy-on-close后,每次打开该对话框都会出现打印信息...
但是在第二次打开的时候,第一行默认高亮,本身并没有设置该行为选中行。 第一次点开: 选中该行,点击关闭 第二次打开此el-dialog: 第一行默认高亮 第二次打开窗口后,如果点击第一行,第一行依旧为高亮状态,然后会设置第一行为currentisolatorRow。 如果点击其他行,其他行会切换为高亮状态。