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

news2024/9/20 16:52:57

问题描述:

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

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

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

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

<el-switch
   v-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.coloradmin.cn/o/2115992.html

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

相关文章

单线程 TCP/IP 服务器和客户端的实现

单线程 TCP/IP 服务器和客户端的实现 文章目录 单线程 TCP/IP 服务器和客户端的实现通信流程服务端客户端 代码实现服务端客户端 运行结果 通信流程 服务端 socket&#xff1a;创建监听的文件描述符(socket) fd&#xff1b;bind&#xff1a;fd 和自身的 ip 和端口绑定&#x…

【Transformer】Positional Encoding

文章目录 为什么需要位置编码&#xff1f;预备知识三角函数求和公式旋转矩阵逆时针旋转顺时针旋转 原始Transformer中的位置编码论文中的介绍具体计算过程为什么是线性变换&#xff1f; 大模型常用的旋转位置编码RoPE基本原理Llama3中的代码实现 参考资料 为什么需要位置编码&a…

DPDK基础入门(五):报文转发

网络处理模块划分 Packet Input: 接收数据包&#xff0c;将其引入处理流程。Pre-processing: 对数据包进行初步处理&#xff0c;例如基本的检查和标记。Input Classification: 细化数据包的分类&#xff0c;例如基于协议或流进行分流。Ingress Queuing: 将数据包放入队列中进行…

【信息学奥赛题】

目录 一、计算机组成与工作原理 二、计算机信息表示 三、计算机软件系统 四、计算机网络基础 五、多媒体知识 六、数据结构 七、程序语言知识 八、知识性问题 一、计算机组成与工作原理 1&#xff0e;下列不属于冯诺依曼计算机模型的核心思想是&#xff08;D&#xff…

Spring源码(3)Aware接口、初始化和销毁方法、@Scope、@Primary

1、目标 本文的主要目标是学习Spring源码中Aware接口、初始化和销毁方法、Scope注解、Primary注解的使用 2、Aware接口 Component public class MyBeanAware implements BeanNameAware, ApplicationContextAware {Overridepublic void setBeanName(String name) {System.out…

Linux系统本地化部署Dify并安装Ollama运行llava大语言模型详细教程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

屏保壁纸 芝麻时钟比屏保壁纸更好看的桌面动态屏保 大气美观

屏保壁纸 芝麻时钟比屏保壁纸更好看的桌面动态屏保 大气美观&#xff0c;今天小编给大家带来一款非常大气美观的桌面时钟屏保&#xff0c;比屏保壁纸更好看&#xff0c;更美观的桌面屏保软件。非常有个性化哦&#xff0c;我们看看这种屏保主题&#xff0c;是不是让你眼前一亮呢…

20240908 每日AI必读资讯

新AI编程工具爆火&#xff1a;手机2分钟创建一个APP&#xff01; - AI初创公司Replit推出的智能体——Replit Agent。开发环境、编写代码、安装软件包、配置数据库、部署等等&#xff0c;统统自动化&#xff01; - 操作方式也是极其简单&#xff0c;只需一个提出Prompt的动作…

HBuilderx 安装 compile-node-sass编译工具

在使用HBuilderx工具&#xff0c;利用uni-app框架开发前端过程中&#xff0c;应用 “.scss”扩展名的的样式文件&#xff0c;scss作为css的预编译文件&#xff0c;在实际开发中是需要编译的&#xff0c;所以需要安装插件 compile-node-sass。 本人在CSDN下载插件“compile-node…

2.软件生命周期及流程(包含笔试/面试题)

一、软件生命周期 1.什么是软件的生命周期&#xff1f; 软件生命周期就是软件从开始研发到最终被废弃不用的一整个过程。 二、软件生命周期模型 1.瀑布型生命周期模型&#xff08;基本不用这个模型&#xff09; 最早期的模型&#xff0c;流程是从上而下的&#xff0c;如同瀑布流…

【机器人工具箱Robotics Toolbox开发笔记(二)】Matlab中机器人工具箱的下载与安装

Matlab机器人工具箱(Robotics Toolbox)可从Peter Corke教授提供的网站上免费下载。网址为:http://www.petercorke.com/Robotics_Toolbox.html。 图1 网站所提供的机器人工具箱版本 在Downloading the Toolbox栏目中单击here按钮进入下载页面,然后在该页面中填写国家、组织…

基于Python爬虫的淘宝服装数据分析项目

文章目录 一.项目介绍二.爬虫代码代码分析 三. 数据处理四. 数据可视化 一.项目介绍 该项目是基于Python爬虫的淘宝服装数据分析项目&#xff0c;以致于帮助商家了解当前服装市场的需求&#xff0c;制定更加精确的营销策略。首先&#xff0c;需要爬取淘宝中关于服装的大量数据…

JS_函数声明

JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别 函数说明 函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字函数没有…

STM32F407VET6开发板RT-Thread MSH 串口的适配

相关文章 STM32F407VET6开发板RT-Thread的移植适配 环境 STM32F407VET6 开发板&#xff08;魔女&#xff09;&#xff0c;http://www.stm32er.com/ Keil MDK5&#xff0c;版本 5.36 串口驱动 RT-Thread 通过适配 串口驱动&#xff0c;可以使用 MSH shell 当前手动搭建的 …

c++基础版

c基础版 Windows环境搭建第一个C程序c程序运行原理注释常亮字面常亮符号常亮 变量数据类型整型实型常量类型确定char类型字符串布尔类型 控制台输入随机数产生枚举定义数组数组便利 指针基础野指针空指针指针运算动态内存分配 结构体结构体默认值结构体数组结构体指针结构体指针…

JavaWeb笔记整理13——Mybatis

目录 Mybatis介绍 删除 预编译SQL SQL注入 新增 更新 查询 数据封装 条件查询 XML映射文件 动态SQL 更新案例 foreach Mybatis介绍 删除 预编译SQL SQL注入 新增 更新 查询 数据封装 条件查询 XML映射文件 动态SQL <if> 更新案例<set> foreach &l…

消息中间件 --Kafka

一、 Kafka 1.kafka介绍 Kafka 是一个分布式流媒体平台,类似于消息队列或企业消息传递系统。 生产者发送消息&#xff0c;多个消费者只能有一个消费者接收到消息 生产者发送消息&#xff0c;多个消费者都可以接收到消息 producer&#xff1a;发布消息的对象称之为主题生产者…

人工智能,语音识别也算一种人工智能。

现在挺晚了&#xff0c;还是没有去睡觉&#xff0c;自己在想什么呢&#xff0c;也不确定。 这是一篇用语音写的文章&#xff0c;先按自己的想法说出来&#xff0c;然后再适当修改&#xff0c;也许就是一个不错的文章。 看来以后就不需要打字了&#xff0c;语音识别度很高&#…

两数之和--力扣1

两数之和 题目思路C代码 题目 思路 根据题目要求&#xff0c;元素不能重复且不需要排序&#xff0c;我们这里使用哈希表unordered_map。注意题目说了只对应一种答案。 所以我们在循环中&#xff0c;使用目标值减去当前循环的nums[i]&#xff0c;得到差值&#xff0c;如果我们…

ICM20948 DMP代码详解(8)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;7&#xff09; 上一回讲解了EMP-App中的入口函数main()中重点关注的第2段代码的后一个函数inv_icm20948_register_aux_compass&#xff0c;讲解了其各个参数&#xff0c;本回对于函数代码进行解析。为了便于理解和回顾…