el-dialog destroy-on-close无效解决办法

我爱模板网在使用elementUI的弹窗插件el-dialog时，因为每次打开必须要重新渲染里面的内容，所以使用了destroy-on-close属性，发现并没有用：

<el-dialog :key="popupType" title="选择用户" :visible.sync="popupShow" :destroy-on-close="true">
    <div>
        弹窗内容，这里省略一万行。。。
    </div>
</el-dialog>

F12打开控制台，发现加不加destroy-on-close属性，关闭dialog，这段代码都存在，而不是消失。

网上查了，这是个BUG。那么只能用v-if或者key来实现。

下面是key的使用：

<el-dialog :key="popupType" title="选择用户" :visible.sync="popupShow">
    <div>
        弹窗内容，这里省略一万行。。。
    </div>
</el-dialog>

下面是v-if的使用：

<el-dialog v-if="popupShow" title="选择用户" :visible.sync="popupShow">
    <div>
        弹窗内容，这里省略一万行。。。
    </div>
</el-dialog>

v-if每次都会重新渲染，每次打开都不会执行动画效果，key如果这次打开的值和关闭之前的值一样，则不重新渲染，但会执行动画，否则重新渲染，并且不执行动画。这里的动画指的是dialog打开时的动画效果。

没有动画效果不好看。我转念一想，其实并不需要dialog消失，只要保证里面的内容是新的就可以了，于是将v-if换了个地方：

<el-dialog title="选择用户" :visible.sync="popupShow">
    <div v-if="popupShow">
        弹窗内容，这里省略一万行。。。
    </div>
</el-dialog>

这样的话，既重新渲染了，又保证了动画会执行


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！