el-dialog关闭卡顿的问题

最新推荐文章于 2024-06-24 11:08:39 发布
最新推荐文章于 2024-06-24 11:08:39 发布
阅读量2.2k 收藏 2
点赞数 1
分类专栏： 踩过的坑 文章标签： javascript vue.js 开发语言 element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41883423/article/details/126537859
版权

el-dialog关闭卡顿的问题

问题表现：

测试环境一切正常的dialog弹窗，到了正式环境下关闭时出现了两秒多的卡顿，即触发关闭事件后页面无响应，大概2秒后才关闭。
在这里插入图片描述

问题分析：

结合上图的性能分析，是在关闭弹窗时的destroy生命周期卡住；
当我将网络设置为脱机之后，这个问题消失；
结合上两点分析，推测是因为某一个组件数据量太大导致了问题；
寻找后发现，该dialog中有多个下拉选择组件
在这里插入图片描述
可以看到滚动条都已经看不见了，数据量极大；

解决方案：

抛弃掉一次性获取所有下拉选项的做法，改用滚动到底部时加载下一页数据的做法，且支持关键字搜索的下拉选择器方案；

帅比九日
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决el-dialog里嵌入el-tabs卡死的问题
@必意玲
05-30 486
【代码】解决 el-dialog 里嵌入 el-tabs 卡死的问题。
使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
Xiaoxiplus的博客
05-13 563
问题描述： 需求是需要在dialog中嵌套dialog，子dialog中嵌套四个tab页，代码中没有对tab页进行显示控制，导致第一次打开时正常，关闭一次后再次打开，浏览器会卡死，电源使用情况暴增，内存占用率很大 解决： 给tab页添加v-if条件 <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> &
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
最新发布
2301_76866366的博客
06-24 363
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
element-ui 的dialog关闭很慢，有延迟
weixin_42120767的博客
12-03 4195
当dialog的数据很多时，你会发现关闭dialog会很卡，解决办法就是关闭前先把渲染的数据清空就关闭及好多了。
vue element dialog关闭时有延迟
qq_41299637的博客
10-22 2548
vue element dialog关闭时有延迟 1.关闭前置空所有数据，就不会有延迟
el-dialog打开慢，大约1-2秒。排查后原因竟然是...
w460457882的博客
10-26 739
废话不多说，dialog内是一个新增的表单，里面使用了el-popover组件，实现了一个复杂下拉选择。组件，就正常秒开了。
【问题解决】-ElmentUI中dialog弹出窗关闭卡死崩溃问题解决
gjb760662328的博客
05-09 1829
elementui-弹窗关闭卡死
dialog弹窗关不掉 vue_【Vue】vue使用elementUI的dialog弹窗，出现延时问题？
weixin_28685483的博客
03-03 2139
问题描述我利用elementui的dialog弹窗，包含,点击不同的数据，弹窗显示不同的组件，当组件的数据显示较多时，在弹窗会出现延时，请问大佬，这个怎么解决？问题出现的环境背景及自己尝试过哪些方法尝试先弹窗，$nextTick里加载路由，也会出现延时，可能是原组件中数据较多，导致显示变慢。相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)openWindow(url,data,title...
element ui dialog 弹出框 加载严重卡顿 弹出 大概需要两三秒 表格卡顿严重
qq_45385505的博客
08-16 3694
elm ui dialog 弹出框 加载严重卡顿 弹出 大概需要两三秒 表格卡顿严重
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题
weixin_47541876的博客
06-07 1348
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题
el-tabs：el-dialog中包含el-tabs时关闭时浏览器卡死问题、在el-tabs处切换按钮所在行添加其他的内容
DcTbnk的博客
06-28 743
el-tabs相关问题1.el-dialog中包含el-tabs时关闭时浏览器卡死问题2.在el-tabs处切换按钮所在行添加其他的内容 1.el-dialog中包含el-tabs时关闭时浏览器卡死问题 el-dialog中包含el-tabs时关闭时浏览器卡死问题 在el-dialog怎么使用destroy-on-close 2.在el-tabs处切换按钮所在行添加其他的内容 在el-tabs处切换按钮同行添加其他的内容 ...
【bug】关于Vue封装el-dialog对话框关闭无反应问题
花椒和蕊的博客
11-19 4314
封装dialog弹窗
使用element-ui + vue 时，dialog中嵌入tabs，再次关闭dialog会导致浏览器卡死的解决方案
weixin_38469425的博客
04-15 2878
<template> <!--对话框-创建项目--> <el-dialog title="" :visible.sync="dialogVisible" :modal="false" :close-on-click-modal="false" :show-close="false" top="0" :destroy-on-close="true" custom-class="robot-...
dialog中嵌套el-tabs,点击关闭按钮时页面卡死的问题
2201_76094801的博客
01-10 1313
关闭dialog导致页面卡死问题
el-dialog数据延迟变化解决
Lalo的博客
03-29 1577
原代码如下： <el-dialog :title="descPro.projectType.project_type_content" :visible.sync="proDetailDialogVisible" width="50%" > </el-dialog> descPro: { projectType: {}, } proDetailDialogVisible: false, //通过点击事件来触发对话框 proDetail(project_id) { thi.
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
08-30 1699
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题 解决办法： 给 tab 添加 v-if ，绑定 dialog 的 visible.sync <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> <el-tab-pane label="用
el-tabs-pane组件在dialog窗口关闭卡死问题
xiao1215fei的专栏
07-08 528
终极解决方案：设置dialog中的属性：destroy-on-close为false；
el-dialog 添加关闭动画
qq_46344419的博客
06-30 1332
el-dialog 添加关闭动画
el-dialog关闭时有抖动
weixin_45884508的博客
03-28 976
在el-dialog的父元素中添加一个min-height，并设置为与el-dialog的高度相等，这样在el-dialog关闭时，父元素的高度不会突然变小，从而避免抖动现象。使用transition来平滑过渡，可以使用vue的transition组件，当el-dialog关闭时，添加一个过渡效果，使得其平滑的消失，不会出现抖动现象。这里使用的是opacity来进行过渡效果，当el-dialog关闭时，opacity会从1到0过渡，使得其平滑的隐藏，从而避免抖动现象。
el-dialog关闭按钮样式修改不影响其它el-dialog关闭按钮样式
05-17
您可以通过给该 el-dialog 组件的关闭按钮设置独立的 class 名称，然后在 CSS 样式表中针对该 class 名称进行样式设置，以达到修改该关闭按钮样式不影响其它 el-dialog 组件关闭按钮样式的目的。 具体做法如下： 1. 在 el-dialog 的组件标签上添加一个新的属性 `:close-button-class`，将其值设置为你想要设置的独立 class 名称，例如： ```html <el-dialog :close-button-class="my-close-button-class"></el-dialog> ``` 2. 在 CSS 样式表中定义你设置的独立 class 名称对应的样式，例如： ```css .my-close-button-class { /* 在这里添加你想要设置的样式 */ } ``` 这样，你就可以通过设置独立的 class 名称来修改 el-dialog 的关闭按钮样式，而不会影响其它 el-dialog 组件的关闭按钮样式了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值