vue elementui/elementPlus 列表点击展开卡顿问题

已于 2024-06-06 16:43:52 修改
阅读量250 收藏
点赞数 4
文章标签： 前端 vue.js vue
于 2024-06-03 16:43:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49065725/article/details/139418665
版权

elmentUi/Plus 管理系统菜单权限管理页面展开卡顿问题解决

在这里插入图片描述

最近遇到菜单管理列表页面，当点击展开菜单时候稍微有迟滞感觉、卡顿问题，以为是点击请求加载卡顿、或者电脑本身卡顿，发现结果并没有使用懒加载请求数据，也是不电脑问题。经过一点一点排查后，找到罪魁祸首了。其实是操作栏按钮气泡框导致的，最终把气泡框干掉就恢复顺畅了

qq_49065725
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端分离项目 Vue3/TS/ElementPlus/springboot/SaToken/MybatisPlus
07-03
租户管理 配置系统租户，支持 SaaS 场景下的多租户功能。 用户管理 用户是系统操作者，该功能主要完成系统用户配置。 部门管理 配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。...
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
解决ElementUI列表大数据操作卡顿问题
weixin_43965532的博客
03-10 5957
前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据，这时点击其他DOM操作，会出现卡顿的现象。基于elementUI的table，在不修改源码的情况下支持大数据了渲染的场景。减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据。官网的示例也搞了，超过200行后操作就会卡很久，比如复选框。Vue自定义指令 （通过自定义指令隐藏数据）全局main.js引用。
elementui导航折叠卡顿的问题
qq_44886882的博客
08-27 5330
记录elementui导航折叠卡顿问题解决思路和方法
【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案
qq_44242030的博客
03-24 4811
问题背景 用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。 原因分析 el-input组件实例数量过多。 el-input的v-model在表单输入时频繁触发更新事件。 解决思路 3. 用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。 在v-model指令上追加.lazy修饰符，使实例数据仅在失去焦点时更新，减少触发次数。 此时光标进入输入框，执
elementui树形表格数据量大时，会造成严重卡顿问题的解决方案
热门推荐
qq_40639028的博客
03-17 1万+
之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树操作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。 我想到的解决方式有两种： 一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。 二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild..
vue3+elementPlus后台管理系统
08-19
Vue3 + ElementPlus 后台管理系统是一个基于Vue.js最新版本（Vue3）和ElementPlus UI库构建的高效、易用的后台管理平台。Vue3带来了许多改进和优化，包括Composition API、Suspense、Teleport等新特性，提升了开发...
初始化vue项目，配置axios/elementUI/echarts/moment等
02-07
2. ElementUI：这是一个基于Vue的组件库，提供了一系列丰富的UI组件，如表格、按钮、对话框等，帮助开发者快速构建美观的后台管理界面。ElementUI的设计风格简洁、优雅，同时提供了良好的文档和社区支持。 3. ...
vue使用ElementUI时导航栏默认展开功能的实现
08-27
Vue 使用 ElementUI 时导航栏默认展开功能的实现 知识点： 1. ElementUI 导航栏默认展开功能的实现原理 在使用 ElementUI 时，默认情况下，导航栏是不能展开的。这是因为 ElementUI 的设计理念是让用户手动展开...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
yrldjsbk的博客
07-18 282
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1220
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
浏览器的卡顿与react的解决思路
最新发布
weixin_45575944的博客
07-18 213
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
中间件的理解
modi000的博客
07-15 282
直接返回，前置服务可以支持更高流量的并发，后置的需要耗时、耗力的，需要IO操作的服务，可以通过MQ慢慢处理。前端写消息的速率比后端处理消息的速率要快很多的。a.快递员角度：快递员无需将快递直接交到用户手里，放在菜鸟驿站即可走了，增加了送快递的数量，提高了送快递的效率；b.用户角度：快递到达的时候在上班，当时无时间取快递，当有了菜鸟驿站后，用户可以在下班闲暇时间去取快递。所以，中间件可以多个可能互相调用的系统耦合程度，提升接口的响应速度，。c.双十一的时候，快递量暴增，快递员不会手忙脚乱、用户可排序取快递。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 432
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 228
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 214
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
ReactRouter v6升级的步骤
feixin369的博客
07-14 406
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
SpringBoot、Mybatis、Shiro、Mysql、Redis、Docker、微信小程序、Vue、Axios、ElementUI/ElementPlus、FastDFS、Nginx、华为云、Git
07-11
你提到了一系列的技术和工具，它们在不同的领域和应用中都有各自的作用。以下是对每个技术和工具的简要介绍： 1. Spring Boot：Spring框架的一个快速开发框架，简化了Spring应用的配置和部署。 2. MyBatis：一个持久层框架，用于通过简单的XML或注解配置来实现Java对象与数据库之间的映射关系。 3. Shiro：一个功能强大且易于使用的Java安全框架，提供身份认证、授权、加密等功能。 4. MySQL：一种流行的关系型数据库管理系统，广泛用于Web应用程序开发。 5. Redis：一种高性能的键值对存储数据库，常用于缓存、消息队列等场景。 6. Docker：一种容器化平台，可将应用程序及其依赖打包成一个独立的容器，实现快速部署和扩展。 7. 微信小程序：一种基于微信平台的移动应用程序，可以在微信客户端中运行。 8. Vue：一种流行的JavaScript前端框架，用于构建用户界面。 9. Axios：一个基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。 10. Element UI/Element Plus：一套基于Vue的UI组件库，提供了丰富的界面组件和交互效果。 11. FastDFS：一个开源的轻量级分布式文件系统，适用于大规模的文件存储和访问。 12. Nginx：一种高性能的Web服务器和反向代理服务器，常用于负载均衡和静态资源缓存。 13. 华为云：华为提供的云计算服务平台，包括计算、存储、网络等各种云服务。 14. Git：一种分布式版本控制系统，用于管理和追踪代码的变更。 这些技术和工具在Web开发、移动应用开发、云计算等领域有着广泛的应用。具体使用哪些技术和工具取决于项目需求和开发团队的偏好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值