vue ant desgin 中modal数据清空（缓存清空）

原创已于 2022-07-08 16:27:12 修改 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

53 篇文章 0 人学习

订阅专栏查看详情

vue

当前文章被收录于：

vue

48 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-07-08 16:25:44 首次发布

在项目开发中遇到一个问题，当关闭并重新打开Modal时，之前的选择状态仍然保留。通过深入研究，发现使用v-if指令可以有效地清除Modal的缓存，从而在再次打开时清空选中项。这是一个既简单又直接的解决方法，避免了在关闭事件中复杂的数据操作。

项目中一直用到一个功能：弹出modal，modal中有一table绑定了一定的数据，然后该列表前有单选或者复选框。选择某些行后，关闭弹窗。再次打开的时候，前一次的选中项依然还在，还处于选中状态。想要的是清空这些选中项，打开弹窗的时候，没有数据选中。以前都是在关闭事件中各种的操作modal中的数据，清空或者重置数据，但是一直不稳定。

今天又遇到了，上网查，终于找到解决办法，简单暴力的解决办法：

<a-modal
    title="选择用户"
    :width="1200"
    :visible="visible" 
    v-if="visible" // 使用v-if 清除弹窗的缓存
    :confirmLoading="confirmLoading"
    @ok="ok"
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >

使用v-if来清除，真是又简单又暴力的办法！！！

标签

#前端 #javascript #vue