首页 > 建站教程 > 前端框架 >  el-dialog destroy-on-close无效解决办法正文

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>
这样的话,既重新渲染了,又保证了动画会执行