el-dialog destroy-on-close的坑(关闭弹窗时触发了子组件的mounted)

表现:

设置了destroy-on-close为true的一个el-dialog,在关闭时候,触发了子组件的mounted。

查找原因:

在element的源码中,找到了destroy-on-close的实现原理:
在这里插入图片描述
在这里插入图片描述
当visible改变为false,即关闭dialog的时候,如果用户设置了destroyOnClose=true,则执行key++;
key是绑定在较外层的div上的,key值的变化会导致这个div重新渲染。

所以我们知道了,设置destroyOnClose=true并不会如同element官方文档描述的这样
在这里插入图片描述
而是刷新dialog内部的元素。
这属于是element官方文档措辞不严谨的问题。

解决:

如果你的需求只是销毁dialog中的元素,那么拉黑该属性,改用v-if。

  • 23
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
`resize` 和 `destroy-on-close` 是 `vxe-table` 中的两个属性,具体说明如下: 1. `resize`属性用于控制表格是否可以动态调整列宽和行高。如果将 `resize` 属性设置为 `true`,则表格将具有动态调整列宽和行高的功能;否则,表格将不能动态调整列宽和行高。例如: ```html <vxe-table :resize="true"></vxe-table> ``` 2. `destroy-on-close`属性用于控制弹窗关闭是否销毁表格。如果将 `destroy-on-close` 属性设置为 `true`,则弹窗关闭表格将被销毁,下次打开弹窗需要重新渲染;否则,弹窗关闭表格不会被销毁,下次打开弹窗表格将保持原有状态。例如: ```html <vxe-modal :destroy-on-close="true"></vxe-modal> ``` 需要注意的是,`resize` 和 `destroy-on-close` 属性都是 `vxe-table` 和 `vxe-modal` 组件的属性,如果您要使用这些属性,需要确保已正确引入了这些组件。例如: ```js import Vue from 'vue' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' import VXETablePluginElement from 'vxe-table-plugin-element' import 'vxe-table-plugin-element/dist/style.css' import VXEModal from 'vxe-modal' import 'vxe-modal/lib/style.css' Vue.use(VXETable) VXETable.use(VXETablePluginElement) Vue.use(VXEModal) ``` 在上面的代码中,我们引入了 `vxe-table`、`vxe-table-plugin-element`、`vxe-modal` 三个组件,并注册了 `vxe-table-plugin-element` 和 `vxe-modal` 插件,以便于使用这些组件的属性。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值