el-dialog缓存问题

Question

vue2.0 项目使用element ui 框架，封装了el-dialog组件，在el-dialog组件使用时显示另外一个组件（富文本编译器组件）的页面，但是我在问题的列表，多次点击编辑使用el-dialog显示页面时，发现数据没有实时更新，一直是第一次的数据，查了很久没有解决办法，求解决办法

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7475426
• 你也可以参考下这篇文章：vue中使用elementui的el-dialog遮罩问题
• 除此之外, 这篇博客: vue项目中实现el-dialog组件可拖拽效果中的 文章目录 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  
  vue项目中实现el-dialog组件可拖拽效果
• • 0. 首先上图，看效果
  • 1. 实现方法
  • • 第一步：创建 drag.js文件 实现拖拽源码
    • 第二步：新建 directive.js 文件，创建vue指令配置文件
    • 第三步：main.js文件中全局引入vue指令
    • 第四步：使用v-draagble
  • 注意事项
  • 参考资料

• 以下回答来自chatgpt:

  解决el-dialog缓存问题的办法：

  根据参考资料中的实现思路和代码示例，可以采取以下步骤解决el-dialog缓存问题：

  1. 在el-dialog组件中，使用v-if指令判断dialog是否可见，根据条件设置对应的属性值。在本例中，可以将visible属性绑定到data中的变量addDeviceDialogVisible上，并在对话框展示时将addDeviceDialogVisible设置为true。

  2. 在el-dialog组件中，设置destroy-on-close属性为true，这样在关闭dialog时会销毁dialog中的元素。

  3. 在弹出dialog的按钮点击事件中，添加逻辑来清空对话框中的数据。可以使用resetFields()方法来重置表单。如果需要在获取到表单对象后立即执行resetFields()方法，则可以使用setTimeout()方法来确保表单对象已加载。示例代码：

  addDeviceBtn() {
    this.addDeviceDialogVisible = true;
    setTimeout(() => {
      this.$refs.addDeviceForm.resetFields();
    }, 0);
  },
  

  1. 在子组件中的el-dialog组件中添加:key属性，并将其绑定到一个变量timer上。这样，每次打开对话框时，通过改变timer的值来重新渲染子组件。示例代码：

  <el-dialog
    title="新增"
    :visible.sync="addDeviceDialogVisible"
    :append-to-body="true"
    top="1vh"
    width="70%"
    :key="timer"
    @destroy-on-close="true"
  >
    <addDevice
      ref="addDeviceForm"
      @addDeviceResult="addDeviceResult"
      @quxiaoClickResult="quxiaoClickResult"
    ></addDevice>
  </el-dialog>
  

  1. 根据需要，在对话框组件（addDevice）的确认按钮点击事件（confirmCreateNewItem）中，处理对话框中的数据并进行提交/处理。

  通过以上步骤，应该能够解决el-dialog缓存问题，并实时更新展示数据。

  参考资料： - Element UI Dialog destroy-on-close - Element UI Dialog - Element UI form - Vue.js官方文档

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^