el-dialog 里面的组件不刷新问题

最新推荐文章于 2025-05-27 11:57:48 发布

曉儂

最新推荐文章于 2025-05-27 11:57:48 发布

阅读量3.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web vue

原文链接：https://www.cnblogs.com/lixingwu/p/13736634.html

web 同时被 2 个专栏收录

41 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文探讨了如何在每次打开Element UI的el-dialog时强制重新初始化内容，以避免用户权限缓存问题。通过设置destroy-on-close属性和使用v-if指令，确保每次关闭后清空弹框内容，实现了弹框内容的每次都独立加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-dialog里面的内容是带缓存的，也就是说除了第一次打开会初始化，其他次打开都是直接加载缓存的。

我们想每次打开el-dialog都要初始化，比如用户的权限弹框，每次打开我们都要把用户拥有的权限选中，类似的操作，如果加载了缓存，这就会导致每个用户回填的权限都一样了。

如果我们在每次关闭弹框时把弹框里面的内容删掉，这样打开时就会初始化了。

查阅了 Dialog 对话框相关文档：

在这里插入图片描述

文档中有，我们可以设置为 :destroy-on-close=“true” 试一试。

<el-dialog
     title="日志查看"
     :visible.sync="dialogLogsVisible"
     fullscreen
     center
     **:destroy-on-close="true"**
 >
    <sys-business-log-list :record-name="recordName" :record-id="recordId" />
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogsVisible=false">{{ $t('cancel') }}</el-button>
    </div>
</el-dialog>

打开时渲染的内容如下：

image-20200926202453369

关闭时渲染的内容如下：

image-20200926202313957

什么鬼，怎么只是加了个属性 display: none; ，说好的关闭销毁元素呢。

没办法了，不能自动销毁里面的内容，那我们手动销毁吧，

直接在内容上加上属性 v-if="dialogLogsVisible"

<el-dialog
  title="日志查看"
  :visible.sync="dialogLogsVisible"
  fullscreen
  center
  :destroy-on-close="true"
 >
    <sys-business-log-list 
       v-if="dialogLogsVisible" 
       :record-name="recordName" 
       :record-id="recordId" 
    />
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogsVisible=false">{{ $t('cancel') }}</el-button>
    </div>
</el-dialog>

这样每次关闭弹框都会把内容直接移除了，现在终于不会缓存了