element-plus中，Loading 加载组件的使用
一.基本使用
给一个组件，如：table表格，加上v-loading="true"即可。
举例：复制如下代码。
<template><el-table v-loading="loading" :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script setup>
import { ref } from 'vue'const loading = ref(true)const tableData = [{date: '2016-05-02',name: 'John Smith',address: 'No.1518, Jinshajiang Road, Putuo District',},{date: '2016-05-04',name: 'John Smith',address: 'No.1518, Jinshajiang Road, Putuo District',},{date: '2016-05-01',name: 'John Smith',address: 'No.1518, Jinshajiang Road, Putuo District',},
]
</script>运行效果：
解读：因为v-loading属性的值一直是true，所以这个表格会一直转圈。
二.实战1：
1.不使用Loading加载组件时存在的问题
在项目中，我们经常会通过axios请求后端，来获取渲染表格的数据。
有些情况下，如果不使用Loading加载组件，就会显得页面很生硬，没有交互感，如下：当我们选择某个患者时，对应的病例表单就会直接生硬地展示出来，没有任何交互感。此时就需要我们使用Loading加载组件来展示加载特效。
2.实现步骤
①给病历表单所在的dom元素，加上v-loading属性。
②创建自定义变量isLoading，用来控制加载动效是否显示
//控制是否显示加载动效 const isLoading = ref(false);//一开始不显示加载动效③向后端axios发送请求时，展示加载动效（令isLoading=true），计时1秒后，将后端获取的数据赋值给对应的前端对象，然后关闭加载动效（令isLoading=false）即可。
//1.根据患者的挂号id，去medical_record表中查询对应的暂存病历信息 const res = await queryTemStoreMedicalRecord(row.id); //2.展示加载动效 isLoading.value = true; //3.显示1秒后，查询后台数据并关闭加载动效 setTimeout(() => {//3.1将后台查询到的函数，赋值给medicalRecordDto.valueif(res.code == 200){//如果查到了该挂号id对应的暂存病历记录，则赋值给medicalRecordDtomedicalRecordDto.value = res.data;//alert(JSON.stringify(medicalRecordDto.value))}else{//如果没查到，就清空病历表单(但保留所选择的患者的挂号id)medicalRecordDto.value = {//id:"",//数据库自增registId:row.id,chiefComplaint:"",present:"",presentTreat:"",history:"",allergy:"",physique:"",proposal:"",care:"",checkResult:"",diagnose:"",handle:"",state:""}}//3.2关闭加载动效isLoading.value = false; },1000)
3.展示效果
可见此时，就有了交互效果，很不错。
相关文章：
element-plus中，Loading 加载组件的使用
一.基本使用 给一个组件，如：table表格，加上v-loading"true"即可。 举例：复制如下代码。 <template><el-table v-loading"loading" :data"tableData" style"width: 100%"><…...
部署完dify：localhost/install 页面不停转圈圈，报错CROS error
解决办法 docker/.env 文件中，需要配置如下： NGINX_HTTPS_ENABLEDtrue NGINX_ENABLE_CERTBOT_CHALLENGEtrue 把Nginx的跨域请求打开...
UE4学习笔记 FPS游戏制作17 让机器人持枪 销毁机器人时也销毁机器人的枪 让机器人射击
添加武器插槽 打开机器人的Idle动画，方便查看武器位置 在动画面板里打开骨骼树，找到右手的武器节点，右键添加一个插槽，重命名为RightWeapon，右键插槽，添加一个预览资产，选择Rifle，根…...
【网络丢包】原因排查及优化
在流式响应中，丢包现象可能由多种因素引起，详细的原因分析、排查方法及优化策略： 一、丢包原因分析 网络拥塞 当网络带宽不足或流量突增时，路由器/交换机可能丢弃超出处理能力的数据包。 硬件问题 网卡、路由器、交换机等设备故…...
Spring Boot 实战：MD5 密码加密应用全解析
Spring Boot 实战：MD5 密码加密应用全解析 1. 引言 在应用开发中，密码安全是用户隐私保护的核心环节。直接存储明文密码存在极大的安全风险（如数据库泄露导致用户信息被盗）。MD5 加密作为一种广泛使用的哈希算法，可将…...
Android 底部EditView输入时悬浮到软键盘上方
1. 修改 Activity 的 Manifest 配置 确保你的 Activity 在 AndroidManifest.xml 中有以下配置： <activityandroid:name".YourActivity"android:windowSoftInputMode"adjustResize|stateHidden" /> 关键点： adjustResize 是…...
【deepseek 学c++】weakptr引用场景
std::weak_ptr 是 C 中与 std::shared_ptr 配合使用的智能指针，它本身不拥有资源的所有权，仅观察资源的状态，主要用于解决 shared_ptr 的循环引用问题和临时访问共享资源的需求。以下是 weak_ptr 的典型应用场景和核心价值：
从技术架构和生态考虑，不是单纯的配置优化，还有哪些方式可以提高spark的计算性能
从技术架构和生态系统层面提升Spark的计算性能，可采取以下核心策略： 一、计算模型重构与执行引擎升级 1. 弹性分布式数据集（RDD）的血统优化 通过RDD的Lineage（血统）机制实现容错时，采用增量式…...
怎样进行服务器的日常安全监控和审计？
服务器的日常安全监控和审计是保障服务器安全运行的重要措施，以下是一些常见的方法和工具： 系统日志监控 启用日志功能：确保服务器操作系统、应用程序和数据库等都启用了详细的日志记录功能。例如，Linux 系统中的 syslog&#x…...
Java 集合框架面经
1、说说有哪些常见的集合框架？ 集合框架可以分为两条大的支线： Map 接口：表示键值对的集合，一个键映射到一个值。键不能重复，每个键只能对应一个值。Map 接口的实现类包括 HashMap、LinkedHashMap、TreeMap 等。Colle…...
【已解决】Git：为什么 .gitignore 不生效？如何停止跟踪已提交文件并阻止推送？
你可能遇到的问题 你已经提交了某个文件夹（如 dataset）到 Git 仓库，之后修改了它，但发现修改内容被 Git 持续跟踪，无法通过 .gitignore 忽略。尝试在 .gitignore 中添加规则后，修改的文件仍然显示为"…...
MOSN（Modular Open Smart Network）-04-TLS 安全链路
前言 大家好，我是老马。 sofastack 其实出来很久了，第一次应该是在 2022 年左右开始关注，但是一直没有深入研究。 最近想学习一下 SOFA 对于生态的设计和思考。 sofaboot 系列 SOFAStack-00-sofa 技术栈概览 MOSN（Modular O…...
SICAR 标准 KUKA 机器人标准功能块说明手册
功能块名称：LSicar_Robot_KUKA_PrD 目录 1. 概述 2. 功能说明 2.1 程序控制 2.2 状态监控 2.3 报警与故障处理 2.4 驱动控制 3. 关键参数说明 4. 操作步骤指南 4.1 初始化配置 4.2 运行控制 4.3 状态监控 5. 常见故障处理 6. 注意事项 附录1：程序段索引 附录…...
QT三 自定义控件，自定义控件的事件处理自定义事件过滤，原始事件过滤
一 自定义控件 现在的需求是这样： 假设我们要在QWidget 上做定制，这个定制包括了关于 一些事件处理，意味着要重写QWidget的一些代码，这是不实际的，因此我们需要自己写一个MyWidget继承QWidget，然后再MyWi…...
Leetcode算法方法总结
1. 双指针法解决链表/数组题目 只要数组有序，就要想到双指针做法。还有二分法 回文串一般也会用到双指针，回文串的长度由于可能是奇数也可能是偶数，所以在寻找时，既需要寻找奇数长度的回文串，也需要寻找偶数长度的回文…...
【Elasticsearch基础】基本核心概念介绍
Elasticsearch作为当前最流行的分布式搜索和分析引擎，其强大的功能背后是一套精心设计的核心概念体系。本文将深入解析Elasticsearch的五大核心概念，帮助开发者构建坚实的技术基础，并为高效使用ES提供理论支撑。 1 索引（Index&…...
docker远程debug
1. 修改 Java 启动命令 在 Docker 容器中启动 Java 程序时，需要添加 JVM 调试参数，jdk8以上版本 java -agentlib:jdwptransportdt_socket,servery,suspendn,address*:5005 -jar your-app.jar jdk8及以下版本： java -Xdebug -Xrunjdwp:tra…...
华为eNSP-配置静态路由与静态路由备份
一、静态路由介绍 静态路由是指用户或网络管理员手工配置的路由信息。当网络拓扑结构或者链路状态发生改变时，需要网络管理人员手工修改静态路由信息。相比于动态路由协议，静态路由无需频繁地交换各自的路由表，配置简单，比较适合…...
CentOS 7下安装PostgreSQL 15
一、简介 PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统（ORDBMS），是以加州大学计算机系开发的POSTGRES，4.2版本为基础的对象关系型数据库管理系统。POSTGRES的许多领先概念只是在比较迟的时候才出现在商业…...
时序数据库 InfluxDB（一）
时序数据库 InfluxDB（一） 数据库种类有很多，比如传统的关系型数据库 RDBMS（ 如 MySQL ），NoSQL 数据库（ 如 MongoDB ），Key-Value 类型（ 如 redis ）…...
动态添加view方法-微信小程序
在微信小程序中，通过动态数据绑定和条件渲染来实现动态添加 view 组件的效果。 以下是一个简单的示例，展示如何根据数据动态添加 view。 WXML 文件 在 WXML 文件中，使用 wx:for 指令来遍历数组，并动态生成 view 组件。 <view…...
Java中清空集合列表元素有哪些方式
在 Java 里，存在多种清空列表的方式，下面为你汇总并附上对应的示例代码： import java.util.ArrayList; import java.util.List;public class ListClearDemo {public static void main(String[] args) {// 初始化一个列表List<String> …...
)
QOpenGLWidget动态加载功能实现教程(Qt+OpenGL)
QOpenGLWidget动态加载功能实现教程 我需要在Qt里面使用QOpenGLWidget显示OpenGL窗口，并且需要实现加载模型后重新渲染更新窗口的功能，但是一直无法更新被卡住了，现在把问题解决了总结一下整个实现过程。 创建一个自己的OpenGLWidget类 QOp…...
00.【Linux系统编程】 Linux初识（云服务器设置CentOS并使用、Xshell链接云服务器）
目录 一、华为云服务器免费体验申请 二、Xshell远程链接创建好的华为云服务器 2.1 下载Xshell 2.2 Xshell远程连接华为云服务器 一、华为云服务器免费体验申请 华为云官网 1. 进入华为云官网，最上面一栏点活动，并进入免费体验中心。 2. 找到含有“…...
数据结构-二叉链表存储的二叉树
树形结构是一类重要的非线性数据结构，其中以树和二叉树最为常用。对于每一个结点至多只有两课子树的一类树，称其为二叉树。二叉树的链式存储结构是一类重要的数据结构，其形式定义如下： 而二叉树的前序、中序遍历是非常重要的能够访…...
鸿蒙Flutter实战：20. Flutter集成高德地图，同层渲染
本文以同层渲染为例，介绍如何集成高德地图 完整代码见 Flutter 鸿蒙版 Demo 概述 Dart 侧 核心代码如下，通过 OhosView 来承载原生视图 OhosView(viewType: com.shaohushuo.app/customView,onPlatformViewCreated: _onPlatformViewCreated,creation…...
idea中快速注释函数
在IntelliJ IDEA中，有多种方法可以快速注释函数。 使用快捷键 你可以使用以下快捷键来快速注释函数[3]： 行注释：使用Ctrl/（Windows系统）或Command/（Mac系统）可以在当前行前添加或删除单行注释…...
Leetcode13-罗马数字转整数
题目链接：13. 罗马数字转整数 - 力扣（LeetCode） 如同上一题，直接用暴力法破解，简单好理解 int romanToInt(char* s) {int len strlen(s);int res 0;for(int i 0; i < len; i) {switch(s[i]) {case M:res 1000…...
3、pytest实现参数化
在 pytest 中，参数化（parametrization）是一种强大的功能，可以让你用不同的输入数据重复执行同一个测试函数。这种功能非常有用，可以帮助你显著减少重复代码并提高测试覆盖率。 参数化的主要作用是： 测试多…...
深入理解指针（4）（C语言版）
文章目录 前言一、回调函数是什么（一）定义（二）工作原理（三）应用场景 二、qsort举例（一）qsort函数简介（二）比较函数的定义（三）使用示例…...
【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的日志管理：Logback 的集成
<前文回顾> 点击此处查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、开篇整…...
记录一次渗透测试/常用命令
渗透测试常用命令速览：从扫描到提权再到流量劫持 在渗透测试中，命令行工具是我们的得力助手。本文总结了我最近在测试虚拟机靶机（IP: 192.168.73.129）时用到的主要命令，涵盖网络扫描、暴力破解、权限提升、数据修改和…...
C++11QT复习（二）
文章目录 Day4-4 New 与 delete 表达式（2025.03.20）1. new 表达式的三个步骤2. delete 表达式的两个步骤3. new[] 与 delete[] Day5 类的定义和关键字再探（2025.03.24）1. C 关键字 const、static、extern2. 类的定义：C…...
Pytorch学习笔记（十）Learning PyTorch - Learning PyTorch with Examples
这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 Learning PyTorch with Examples 部分。 官网链接：https://pytorch.org/tutorials/beginner/pytorch_with_examples.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwdaa2m…...
如何使用DeepSeek编写测试用例？
一、DeepSeek在测试用例设计中的定位 DeepSeek作为AI工具，并非直接替代测试设计，而是通过以下方式提升效率： 快速生成基础用例框架（等价类、边界值等） 智能补充易遗漏场景（如特殊字符、异常流） 自动化脚本片段生成（Python/pytest/JUnit等） 测试数据构造建议（符合业务…...
sql server如何提高索引命中率
#新星杯14天创作挑战营第9期# 前言 近期发现以前开发的系统运行缓慢，经排查，发现有很大的优化空间。数据库版本使用的是sql server，主要有以下一些问题点：数据表无索引、一些不规范的写法（例如in、大表关联࿰…...
FALL靶机
下载靶机，可以看到靶机地址 在kali上扫描靶机的端口和目录文件 访问：http://192.168.247.146/test.php，他提示我们参数缺失 我们爆破一下他的参数 使用kali自带的fuzz FUZZ就是插入参数的位置 -w 指定字典文件 wfuzz -u "http://192.…...
北斗导航 ｜ 改进最小二乘残差法的接收机自主完好性监测算法原理，公式，应用，研究综述，matlab代码
改进最小二乘残差法的接收机自主完好性监测算法研究 摘要 本文针对传统最小二乘残差RAIM算法在复杂环境下检测性能不足的问题，提出了一种基于加权抗差估计的改进算法。通过引入IGGⅢ权函数构建抗差最小二乘模型，结合滑动窗口方差估计和自适应阈值调整机制，显著提升了算法对…...
WPF 浅述ToolTipService.ShowOnDisabled
WPF 浅述ToolTipService.ShowOnDisabled ToolTipService.ShowOnDisabled 属性可以让工具提示在控件禁用状态下仍然显示。这是一个非常方便且简洁的方式。 使用 ToolTipService.ShowOnDisabled，你可以通过设置 ToolTipService.ShowOnDisabled 属性来确保即使在控件禁…...
嵌入式硬件工程师从小白到入门-PCB绘制（二）
PCB绘制从小白到入门：知识点速通与面试指南 一、PCB设计核心流程 需求分析 明确电路功能（如电源、信号处理、通信）。确定关键参数（电压、电流、频率、接口类型）。 原理图设计 元器件选型：匹配封装、电压、…...
05 Python 元组：不可变序列的解析和应用
文章目录 前言元组定义元组的运算索引操作切片操作连接和重复运算循环遍历元组中的元素成员运算内置函数运算 打包和解包操作交换变量的值 前言 在 Python 编程领域，元组（Tuple）是一类极为重要的数据结构。它属于不可变的序列类型࿰…...
MATLAB 批量移动 TIF 文件至分类文件夹
文章目录 前言一、步骤二、代码 前言 本代码用于从指定的源文件夹 (sourceFolder) 中筛选所有 .tif 文件，并根据文件名的特定关键词（Daynight 和 FDI）将其分类移动到相应的目标文件夹 (targetDaynightFolder 和 targetFDIFolder)。 一、步骤…...
Milvus×最新版DeepSeek v3：对标Claude，本地数据五分钟写网站
前言 就在昨晚，DeepSeek v3推出了新版本V3-0324，再次一夜爆火。 虽然官方表示“这只是一次小升级”“API接口和使用方式不变”，但经过Zilliz的第一时间实测，我们发现无论是逻辑能力，还是编程能力，相较原本的…...
抽象代数：群论
系列笔记为本学期上抽象代数课整理的，持续更新。 群的相关定义 群的定义 群是一个带有满足结合律、单位元、逆元的二元运算的集合，记作 ( G , ⋅ ) \left({G, \cdot}\right) (G,⋅)。若群运算满足结合律，则该集合构成半群。如果该半群中含…...
基于 mxgraph 实现流程图
mxgraph 可以实现复杂的流程图绘制。mxGraph里的Graph指的是图论(Graph Theory)里的图而不是柱状图、饼图和甘特图等图(chart)，因此想找这些图的读者可以结束阅读了。 作为图论的图，它包含点和边，如下图所示。 交通图 横道图 架构图 mxGrap…...
Stereolabs ZED Box Mini：机器人与自动化领域的人工智能视觉新选择
在人工智能视觉技术快速发展的今天，其应用场景正在持续拓宽，从智能安防到工业自动化，从机器人技术到智能交通，各领域都在积极探索如何利用这一先进技术。而 Stereolabs 推出的ZED Box Mini，正是一款专为满足这些多样化…...
音视频 二 看书的笔记 MediaPlayer
此类是用于播放声音和视频的主要 API 对方不想多说向你丢了一个链接 MediaPlayer Idle 空闲状态Initialized 初始化状态 调用 setDataSource() 时会进入此状态 setDataSource必须在Idle 状态下调用，否则就抛出异常了了了了了。Prepared 准备状态 回调监听setOnPrep…...
可以把后端的api理解为一个目录地址，但并不准确
将后端的 API 理解为一个“目录地址”是可以的，但并不完全准确。让我们更详细地解释一下。 目录 1、生动形象了解api 2、后端 API 的作用 3、可以将 API 理解为“目录地址”的原因 （1）URL 路径 （2）层次结构 4、…...
vscode连接服务器失败问题解决
文章目录 问题描述原因分析解决方法彻底删除VS Code重新安装较老的版本 问题描述 vscode链接服务器时提示了下面问题： 原因分析 这是说明VScode版本太高了。 https://code.visualstudio.com/docs/remote/faq#_can-i-run-vs-code-server-on-older-linux-distribu…...
Qt 高效读写JSON文件，玩转QJsonDocument与QJsonObject
一、前言 JSON作为轻量级的数据交换格式，已成为开发者必备技能。Qt框架为JSON处理提供了完整的解决方案，通过QJsonDocument、QJsonObject和QJsonArray三大核心类，轻松实现数据的序列化与反序列化。 JSON vs INI 特性JSONINI数据结构支持嵌…...