最近在老项目，Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题，问了度娘，说是ui和vue的版本不匹配，但老项目又不好都重新升级，然后其它什么在tabs外包一层el-row什么的也没用，最后问了chatgpt解决了，哈哈哈哈哈
/*这个问题可能是由于 Vue2 和 Element UI 的组件在销毁时出现了问题。当关闭 dialog 时，可能没有正确地销毁内部的 tabs 组件，导致浏览器卡死。为了解决这个问题，你可以尝试以下方法：
使用 v-if 而不是 v-show 控制 dialog 的显示和隐藏。这样可以确保在关闭 dialog 时，内部的 tabs 组件会被正确地销毁。
*/
html
Copy code
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
<el-tabs>
<!-- your tabs content -->
</el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
<el-tabs>
<!-- your tabs content -->
</el-tabs>
</el-dialog>
/*在关闭 dialog 时，手动销毁内部的 tabs 组件。你可以在 dialog 的 @close 事件中触发一个方法，然后在该方法中销毁 tabs 组件。*/
html
Copy code
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
<el-tabs ref="tabs">
<!-- your tabs content -->
</el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
<el-tabs ref="tabs">
<!-- your tabs content -->
</el-tabs>
</el-dialog>
javascript
Copy code
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose() {
this.dialogVisible = false;
this.$nextTick(() => {
this.$refs.tabs.$destroy();
});
}
}
};
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose() {
this.dialogVisible = false;
this.$nextTick(() => {
this.$refs.tabs.$destroy();
});
}
}
};
/*如果上述方法仍然无法解决问题，你可以尝试升级 Vue 和 Element UI 到最新版本，看看是否有相关的 bug 修复。
*/
以上是gpt的回答，我用了v-if="dialogVisible"就可以了