表格多列情况下,loading不显示问题

news/2024/9/17 8:42:38/ 标签: vue.js, 前端, javascript

问题描述:

        用element plus 做得表格,如下图,列数较多,且部分表格内容显示比较复杂,数据量中等的情况下,有一个switch 按钮,切换部分列的显示和隐藏,会发现,切换为显示的时候,会出现明显的卡顿,switch 也会明显卡顿一会之后,才显示成高亮状态。

        这是由于表格渲染的列比较多,且部分内容比较复杂,即使数据量算不上多,但渲染出来的DOM数量不少导致的,不过好在这里渲染卡顿不算严重,所以这里没做虚拟表格之类的优化。打算做个loading动画,在切换的时候,显示loading,让用户不会认为点了之后没反应。但加了loading之后,发现切换时loading显示不出来,应该是表格占用了渲染的主进程导致的。

        switch切换的时候,就会触发表格重新渲染了,这个问题不太好解决。后想到一种相对可行的方案,如下:

1、将原本绑定isAll (原本控制列是否显示的变量) 变量的switch改成绑定另一个变量fakeIsAll

<el-switchv-model="fackIsAll"active-text="查看全部"inactive-text="固定列"@change="toggleViewAll"
/>

2、通过setTimeout, 等switch状态切换完,loading显示后,再将fakeIsAll的值赋值给isAll.

const fakeIsAll = ref(false)
function toggleViewAll(){const loading = ElLoading.service({lock: true,background: 'rgba(255, 255, 255, 0)',})setTimeout(()=>{loading.close()},1000)setTimeout(() => {isAll.value = fakeIsAll.value}, 500);}

这样优化后,switch能马上切换状态,loading也能显示出来,不足之处在于,表格渲染期间,loading还是会卡顿。

不做虚拟表格优化的情况下,道友们时候有更好的方法,欢迎讨论。。。。


http://www.ppmy.cn/news/1522813.html

相关文章

逻辑运算基础知识

关系运算符 <:小于 <:小于等于 >:大于 >:大于等于 以上优先级相同&#xff1a;高 &#xff1a;等于 !&#xff1a;不等于 以上优先级相同&#xff1a;低 说明&#xff1a; 关系运算符的 优先级 低于 算数运算符 关系运算符的 优先级 大于 赋值运算符 逻辑运算&a…

前向渲染路径

1、前向渲染路径处理光照的方式 前向渲染路径中会将光源分为以下3种处理方式&#xff1a; 逐像素处理&#xff08;需要高等质量处理的光&#xff09;逐顶点处理&#xff08;需要中等质量处理的光&#xff09;球谐函数&#xff08;SH&#xff09;处理&#xff08;需要低等质量…

如何使用 PHP 函数与其他 Web 服务交互?

在 PHP 中&#xff0c;我们可以使用 cURL 或者 file_get_contents 函数与其他 Web 服务进行交互。 使用 cURL 函数 cURL 是一个库&#xff0c;它允许你使用各种类型的协议来发送数据&#xff0c;并从服务器获取数据。 $curl curl_init(‘http://example.com/api’); curl_s…

SprinBoot+Vue漫画天堂网的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

前端框架有哪些?以及每种框架的详细介绍

目录 前言1. React2. Vue.js3. Angular4. Bootstrap5. Foundation总结 前言 前端框架是Web开发中不可或缺的工具&#xff0c;它们为开发者提供了丰富的工具和抽象&#xff0c;使得构建复杂的Web应用变得更加容易。当前&#xff0c;前端框架种类繁多&#xff0c;其中一些最受欢…

【全网最全】2024年数学建模国赛A题30页完整建模文档+17页成品论文+保奖matla代码+可视化图表等(后续会更新)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片那是获取资料的入口&#xff01; 【全网最全】2024年数学建模国赛A题30页完整建模文档17页成品论文保奖matla代码可视化图表等&#xff08;后续会更新&#xff09;「首先来看看目前已有的资料&#xff0…

应用开发“取经路”,华为应用市场送出全周期服务“助攻”

最近大量国内外玩家被西游神话圈粉&#xff0c;化身游戏人物角色&#xff0c;踏上了充满冒险的取经路。如果让莘莘学子或创业者们&#xff0c;在自己的职业生涯中&#xff0c;也选一个机遇跟挑战并存的角色&#xff0c;“开发者”一定榜上有名。 智能手机和移动互联网的普及&am…

30天pandas挑战

大的国家 挑选出符合要求的行 def big_countries(world: pd.DataFrame) -> pd.DataFrame:df world[(world[area] > 3000000) | (world[population] > 25000000)]return df[[name,population,area]] 在Pandas中&#xff0c;当你使用条件过滤时&#xff0c;应该使用 …

记一次升级 Viper、ETCD V3操作Toml

前一阵子碰到Go写的一项目&#xff0c;使用viper和ETCD进行Toml文件的存储与写入。在当我安装新版本的ETCD和升级Go依赖包之后出现了不兼容的问题。旧版viper为1.10版本&#xff0c;使用github.com/coreos/go-etcd v2.0.0incompatible 作为请求包。看了源码之后发现新的版本中废…

HashMap 底层原理解析

HashMap 是 Java 中非常常用的一个数据结构&#xff0c;它基于哈希表实现&#xff0c;提供了快速的键值对存储和检索。本文将深入探讨 HashMap 的底层实现原理&#xff0c;包括其数据结构、哈希函数、冲突解决机制以及扩容机制。 1. 哈希表基础 哈希表是一种通过哈希函数将键…

【重学 MySQL】二十、运算符的优先级

【重学 MySQL】二十、运算符的优先级 MySQL 运算符的优先级&#xff08;由高到低&#xff09;注意事项示例 在 MySQL 中&#xff0c;运算符的优先级决定了在表达式中各个运算符被计算的先后顺序。了解运算符的优先级对于编写正确且高效的 SQL 语句至关重要。以下是根据高权威性…

C++学习笔记(13)

203、文件操作-写入二进制文件 二进制文件以数据块的形式组织数据&#xff0c;把内存中的数据直接写入文件。 包含头文件&#xff1a;#include <fstream> 类&#xff1a;ofstream&#xff08;output file stream&#xff09; ofstream 打开文件的模式&#xff08;方式&am…

代理模式(权限、远程调用、延迟加载、日志和缓存)

1、权限保护代理模式 使用 代理模式 实现一个“干饭村约会系统服务”的示例&#xff0c;能够通过代理控制对实际对象&#xff08;比如用户的约会资料&#xff09;访问、保护隐私、限制不正当操作等。 需求分析&#xff1a; 用户&#xff08;Person&#xff09;&#xff1a;干…

自我指导:提升语言模型自我生成指令的能力

人工智能咨询培训老师叶梓 转载标明出处 传统的语言模型&#xff0c;尤其是经过指令微调的大型模型&#xff0c;虽然在零样本&#xff08;zero-shot&#xff09;任务泛化上表现出色&#xff0c;但它们高度依赖于人类编写的指令数据。这些数据往往数量有限、多样性不足&#xf…

uniapp+vue+ts开发中使用signalR实现客户端和服务器通讯

SignalR SignalR 面向 ES6。 对于不支持 ES6 的浏览器&#xff0c;请将库转译为 ES5。 SignalR 支持以下用于处理实时通信的技术&#xff08;按正常回退的顺序&#xff09;&#xff1a; WebSocketsServer-Sent Events长轮询SignalR 自动选择服务器和客户端能力范围内的最佳传输…

如何在极狐GitLab中添加 SSH Key?

本文分享如何生成 SSH Key 并添加到极狐GitLab 中&#xff0c;然后用 SSH Key 进行代码拉取。 极狐GitLab 是 GitLab 在中国的发行版&#xff0c;可以私有化部署&#xff0c;对中文的支持非常友好&#xff0c;是专为中国程序员和企业推出的企业级一体化 DevOps 平台&#xff0…

路由器的固定ip地址是啥意思?固定ip地址有什么好处

‌在当今数字化时代&#xff0c;‌路由器作为连接互联网的重要设备&#xff0c;‌扮演着举足轻重的角色。‌其中&#xff0c;‌路由器的固定IP地址是一个常被提及但可能让人困惑的概念。‌下面跟着虎观代理小二一起将深入探讨路由器的固定IP地址的含义&#xff0c;‌揭示其背后…

图文解析保姆级教程:Postman专业接口测试工具的安装和基本使用

文章目录 1. 引入2. 介绍3. 安装4. 使用 此教程摘选自我的笔记&#xff1a;黑马JavaWeb开发笔记16——请求&#xff08;postman、简单参数、实体参数、RequestParam映射&#xff09;想要详细了解更多有关请求各种参数介绍的知识可以移步此篇笔记。 1. 引入 在当前最为主流的开…

营养餐共享网站:项目规划Plan1

缘起 一些小众的项目&#xff0c;可能还没有较好的网站服务。一些APP项目&#xff0c;受限于支付宝和微信等的限制&#xff0c;只能很简单的在搜索框查找&#xff0c;不能像网站那样在公开引擎上搜索&#xff0c;那个范围更广&#xff0c;搜索到的结果更多。 所以我们想做一个…

数据结构代码集训day15(适合考研、自学、期末和专升本)

本份题目来自B站up&#xff1a;白话拆解数据结构 今日题目如下; &#xff08;1&#xff09;编写算法&#xff0c;实现十进制转十六进制&#xff1b; &#xff08;2&#xff09;汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称河内塔&#xff0c;源于印度一个古老…