el-dialog 关闭再打开后窗口内容不刷新问题

解决办法

直接在内容上加上属性 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>

问题描述:

dialog上的内容关闭后再次打开窗口上的内容不刷新;

问题原因:

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

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

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

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

image-20200926200018416

文档中有,我们可以设置为 :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"

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值