关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题

如题,多个cascader级联组件,下拉选项含大量数据,滚动时会有实时样式重新渲染,导致CUP内存溢满而卡顿

小优化技巧:可加loading一次性加载完多个cascader级联组件后再允许页面滚动。

方法一:使用elementui中的内部源码的方法处理(推荐)

<script>// visible-change事件const cascaderVisibleChange = (val) => {const popperJsEle = refs.cascaderRef[0].popperJSif (val) {// 打开下拉时监听popper样式popperJsEle._setupEventListeners()} else {popperJsEle._removeEventListeners()}nextTick(() => {// 防止下拉框中滚动卡顿,去掉属性aria-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})}onMounted(() => {nextTick(() => {// 防止取不到poppperJS对象setTimeout(() => {// 调用内部方法,清除页面滚动实时监听给popper添加样式,导致内存溢满refs.cascaderRef[0].popperJS._removeEventListeners()}, 1000)})})</script>

方法二:强制写入display: none;样式(次推荐)

<style lang="scss">.none-imp {display: none!important;}
</style>// 当级联组件数据量大,滚动实时监听样式导致渲染消耗CPU内存溢出,可将其和子元素样式强制隐藏
const cascaderScrollStyle = (type) => {const popperEle = refs.cascaderRef[0].$refs.popperif (type === 'add') {// 父元素popperEle.classList.add('none-imp')// 第一个子元素popperEle.firstChild.classList.add('none-imp')} else if (type === 'remove') {popperEle.classList.remove('none-imp')popperEle.firstChild.classList.remove('none-imp')}
}// 防止el-cascader数据量过大,选择时卡顿,去掉属性aria-owns
const cascaderVisibleChange = (val) => {if (val) {cascaderScrollStyle('remove')} else {cascaderScrollStyle('add')}nextTick(() => {// 下拉项滚动删除属性aria-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})
}onMounted(() => {nextTick(() => {cascaderScrollStyle('add')})
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2023.10.25练习】数据库-函数2

任务描述 本关任务&#xff1a;编写函数fun_2&#xff0c;实现指定学生的GPA计算。输入参数为学号&#xff0c;函数返回值为该生的GPA。 编程要求 在代码文件“step3/query1.sql”中实现函数fun_2&#xff1b; 在代码文件“step3/query2.sql”中实现在select命令中调用函数f…

LeetCode 917 仅仅反转字母 简单

题目 - 点击直达 1. XXXXX1. 917 仅仅反转字母 简单1. 原题链接2. 题目要求3. 基础框架 2. 解题思路1. 思路分析2. 时间复杂度3. 代码实现 1. XXXXX 1. 917 仅仅反转字母 简单 给你一个字符串 s &#xff0c;根据下述规则反转字符串&#xff1a; 所有非英文字母保留在原有位置…

【计算机网络】认识协议

目录 一、应用层二、协议三、序列化和反序列化 一、应用层 之前的socket编程&#xff0c;都是在通过系统调用层面&#xff0c;如今我们来向上打通计算机网络。认识应用层的协议和序列化与反序列化 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应…

如何快速解决d3dcompiler_43.dll缺失问题?五种方法快速解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“D3DCompiler_43.dll缺失”。这个错误通常会导致游戏、应用程序或系统无法正常运行。为了解决这个问题&#xff0c;我们需要采取一些修复方案来恢复缺失的文件。本文将介绍五个修复D3DCompi…

百度超级链XuperChain使用JavaSDK接入

环境 &#xff1a; ubuntu20 xuperchain 5.3 go 1.17 springboot : 2.5.14 前言 请提前启动好xchain的节点&#xff0c;我选择简单启一个xchain节点作为测试&#xff0c;并且使用默认端口37101 SpringBoot项目初始化 我们先进行SpringBoot项目的配置进行讲解&#xff0c;这里…

mongodb数据迁移的方法

这个方法只能将数据从一个mongo数据库转移到另一个mongo数据库 这个命令可以备份mongo数据&#xff08;mongo数据库中的数据备份转换为文件&#xff09; mongodump --host HOST --port PORT --username USERNAME --password PASSWORD --db DB -c COLLECTION --out OUT这个命令…

Flutter的The file name ‘xxxx.dart‘ isn‘t a snake_case identifier警告

文章目录 警告原因分析解决方法dart的一些命名规则变量和函数命名&#xff1a;类和类型命名&#xff1a;常量和枚举&#xff1a;文件命名&#xff1a;包命名&#xff1a;注释&#xff1a;命名一致性&#xff1a;避免缩写&#xff1a;可搜索的命名&#xff1a; 一些好习惯 警告 …

C++不能在子类中构造函数的初始化成员列表中直接初始化基类成员变量

在C中&#xff0c;派生类的构造函数可以调用基类的构造函数来初始化基类的成员变量。但是无法在派生类的构造函数的初始化列表中直接初始化基类的成员变量。 如果那样做&#xff0c;会报错&#xff1a;xx不是类xx的非静态成员或基类 例子 class StatusBase{ public:~StatusBas…

[已解决]安装的明明是pytorch-gpu,但是condalist却显示cpu版本,而且torch.cuda.is_available 也是flase

问题; 安装了gpu版本的pytorch&#xff0c;但是显示的torch.cuda.is_available(&#xff09;却是flase。 conda list查看 版本显示只有cpuonly 在网上找了半天&#xff0c;也没有解决办法。 仔细看了一下&#xff0c;发现&#xff0c;有个单独的包叫cpuonly&#xff0c;不知道…

33基于MATLAB的对RGB图像实现中值滤波,均值滤波,维纳滤波。程序已通过调试,可直接运行。

基于MATLAB的对RGB图像实现中值滤波&#xff0c;均值滤波&#xff0c;维纳滤波。程序已通过调试&#xff0c;可直接运行。 33 MATLAB、图像处理、维纳滤波 (xiaohongshu.com)

linux入门---多线程的控制

目录标题 线程库pthread_create如何一次性创建多个线程线程的终止线程的等待线程取消分离线程如何看待其他语言支持的多线程线程id的本质线程的局部存储线程的封装 线程库 要想控制线程就得使用原生线程库也可以将其称为pthread库&#xff0c;这个库是遵守posix标准的&#xf…

小美的修路(最小生成树练习)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 3 4 1 2 3 1 1 2 2 0 1 3 1 0 2 3 3 0 输出 2 1 3 思路&#xff1a; 由题意&#xff0c;这里建造的城市需要修路&#xff0c;且每个城市之间可以联通&#xff0c;且 是 1 …

Nautilus Chain 联合香港数码港举办 BIG DEMO DAY活动,释放何信号?

在今年的 10 月 26 日 9:30-18:30 GMT8 期间&#xff0c;Nautilus Chain 联合香港数码港共同举办了 “BIG DEMO DAY” Web3 项目路演活动&#xff0c;包括Xwinner、Sleek、Tx、All weather、Coral Finance、DBOE、PARSIQ、Hookfi、Parallels、Fintestra 以及 dot.GAMING 等在内…

异步请求池——池式组件

前言 本文详细介绍异步请求池的实现过程&#xff0c;并使用DNS服务来测试异步请求池的性能。            两个必须牢记心中的概念&#xff1a; 同步&#xff1a;检测IO 与 读写IO 在同一个流程里异步&#xff1a;检测IO 与 读写IO 不在同一个流程 同步请求 与 异步请求…

JDBC对数据库进行操作

一.使用JDBC查询数据库表t_user的所有数据 1.User表 名称 数据类型 主键 是否为空 说明 ID number 是 用户编号 NAME Varchar2(50) 用户名 AGE varchar2(5) 用户年龄 BIRTH date 用户生日 PWD varchar2(20) 否 用户密码 import java.sql.Connection; import java.sql.Date; …

【springboot单元测试,集成测试】

本文介绍一下SpringBoot中的测试方法 集成测试 SpringBootTest 一个普通的web api RequestMapping RestController public class HelloController {AutowiredRestTemplate restTemplate;GetMapping(value "/api/hi")public Map<String,Object> hello() {S…

服务运营 |论文解读: 住院病人“溢出”:一种近似动态规划方法

摘要 在住院床位管理中&#xff0c;医院通常会将住院病人分配到相对应的专科病房&#xff0c;但随着病人的入院和出院&#xff0c;可能会出现病人所需的专科病房满员&#xff0c;而其他病房却有空余床位的情况。于是就有了 "溢出 "策略&#xff0c;即当病人等候时间…

微服务-Feign

文章目录 Feign介绍Feign的基本使用自定义Feign的配置Feign性能优化Feign最佳实践 Feign介绍 RestTemplate远程调用存在的问题&#xff1a;代码可读性差&#xff0c;java代码中夹杂url&#xff1b;参数复杂很难维护 String url "http://userservice/user/" order.g…

Elasticsearch打分机制

一 例子 xx搜索引擎,就搜索结果本身而言,xx返回了正确的结果。因为返回的结果中,都包含了搜索的关键字。而我们从逻辑上来看,这一堆广告算是咋回事!这个吐槽是从用户的角度出发的。很显然,返回的结果中,尤其是前几条,有时甚至是前几页,都跟我们想要的结果相差深远! …

CSP-J 2023 T3 一元二次方程 解题报告

CSP-J 2023 T3 一元二次方程 解题报告 Link 前言 今年 C S P CSP CSP的原题, 回家 1 h 1h 1h内写 A C AC AC, 但是考场上没有写出来 , 原因是脑子太不好了, 竟然调了两个小时没有调出来. 一等奖悬那… 正题 看完题目,第一眼就是大模拟, 并且 C C F CCF CCF绝对不会让你好受…