当前位置: 首页 > news >正文

el-tabs中tabs过多造成form表单输入的时候卡顿

这里写自定义目录标题

  • tabs过多造成的输入卡顿
    • 解决方案
      • 方案一
      • 方案二
    • 出现的并发问题
      • 解决方案

tabs过多造成的输入卡顿

描述:前端要写一个需求,大概有一百多个tab渲染过来,每个tab中都是一个表单,这个时候数据渲染任务加重,输入内容时十分卡顿

解决方案

方案一

使用tabs的懒加载模式,只有打开对应的tab才加载对应tab内容
在这里插入图片描述
问题得到解决,亲测

方案二

对tab下的表单使用v-if,当前触发的tab与form索引一致时,才显示form
问题得到解决,亲测

出现的并发问题

使用懒加载或者v-if,都会造成我的表单没办法全部验证的问题。没有被加载的tab下的form,不会进行验证,导致验证失败
这个问题我的解决方案有点繁琐,欢迎评论区留言

解决方案

添加自定义验证,对数据进行循环

for(i = 0; i< this.data.length; i++) {// 循环触发每个tab,执行表单验证this.activePane = i.toString()this.$refs.form.validate()
}

相关文章:

el-tabs中tabs过多造成form表单输入的时候卡顿

这里写自定义目录标题 tabs过多造成的输入卡顿解决方案方案一方案二 出现的并发问题解决方案 tabs过多造成的输入卡顿 描述&#xff1a;前端要写一个需求&#xff0c;大概有一百多个tab渲染过来&#xff0c;每个tab中都是一个表单&#xff0c;这个时候数据渲染任务加重&#x…...

vue+vite打包空白问题

在使用vuevite创建项目之后如果我们在部署项目的时候使用的不是主域名 比如www.custom.com 而是使用了www.custom.com/test 为访问域名的时候 如果不小心没有注意到这个变化 在打包上线之后会出现页面空白 js或者css404问题 我们可以在vite.config.ts去配置路径base export de…...

【python翻译软件V1.0】

如果不想使用密钥的形式&#xff0c;且需要一个直接可用的中英文翻译功能&#xff0c;可以使用一些免费的公共 API&#xff0c;如 opencc 或其他无需密钥的库&#xff0c;或直接用 requests 获取翻译结果。 其中&#xff0c;我可以给你一个简单的代码示例&#xff0c;使用 tra…...

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之循环结构(while循环应用)

实战训练1—求最大公约数 问题描述&#xff1a; 给定两个正整数&#xff0c;求它们的最大公约数。 输入格式&#xff1a; 输入一行&#xff0c;包含两个正整数。 输出格式&#xff1a; 输出一行&#xff0c;包含gcd正整数&#xff0c;即这两个正整数的最大公约数。 输入…...

HTTPS协议的基础与工作原理

什么是HTTPS&#xff1f; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是HTTP协议的安全版本&#xff0c;它通过SSL/TLS协议对通信数据进行加密&#xff0c;确保数据的安全传输。与HTTP相比&#xff0c;HTTPS能防止数据被窃取、篡改或伪造&#xff0c;广…...

手游业务该如何选择服务器?

在网络游戏行业当中&#xff0c;对于服务器配置的需求是非常高的&#xff0c;大型的网络游戏需要服务器的高稳定性&#xff0c;来保证用户的游戏体验感&#xff0c;那么对于手游业务来说该如何进行选择服务器呢&#xff1f; 手游业务通常都需要处理大量的用户数据信息和并发请求…...

Python 数据建模完整流程指南

在数据科学和机器学习中&#xff0c;建模是一个至关重要的过程。通过有效的数据建模&#xff0c;我们能够从原始数据中提取有用的洞察&#xff0c;并为预测或分类任务提供支持。在本篇博客中&#xff0c;我们将通过 Python 展示数据建模的完整流程&#xff0c;包括数据准备、建…...

java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter

今天在朋友机子上运行代码&#xff0c;在生成token的时候&#xff0c;遇到了这样一个问题&#xff1a; Caused by: java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter at io.jsonwebtoken.impl.Base64Codec.decode(Base64Codec.java:26) ~[jjwt-0.9.1.jar:0.…...

12. C语言 数组与指针(深入理解)

本章目录: 前言1. 什么是数组&#xff1f;2. 数组的声明与初始化声明数组初始化数组 3. 访问数组元素遍历数组 4. 获取数组长度使用 sizeof 获取长度使用宏定义简化 5. 数组与指针数组名与指针的区别使用指针操作数组 6. 多维数组遍历多维数组 7. 数组作为函数参数8. 高级技巧与…...

C#用直线和曲线抗锯齿

使用 GDI 绘制一条线时&#xff0c;要提供线条的起点和终点&#xff0c;但不必提供有关线条上各个像素的任何信息。 GDI 与显示驱动程序软件协同工作&#xff0c;确定将打开哪些像素以在特定显示设备上显示该线条。 效果对比 代码实现 关键代码 e.Graphics.SmoothingMode Sm…...

从SS到CSS:探索网页样式设计的奥秘

一、什么是CSS CSS&#xff0c;全称为层叠样式表&#xff08;Cascading Style Sheets&#xff09;&#xff0c;是一种用于描述HTML&#xff08;超文本标记语言&#xff09;或XML&#xff08;包括如SVG、MathML等各种XML方言&#xff09;文档样式的样式表语言。 从结构和功能的…...

[Git] git reset --hard / git reset --soft

git reset --hard 功能&#xff1a;重置索引&#xff08;暂存区&#xff09;和工作目录到指定的提交状态。这意味着它会丢弃所有未提交的更改和已暂存的更改。 适用场景&#xff1a;当你想要完全放弃当前工作目录中的所有更改并回退到某个特定提交状态时&#xff0c;可以使用这…...

OIDC IdentityServer4》》授权码模式+刷新令牌

认证服务 new Client {ProtocolType "oidc",ClientName "测试",ClientId "zen",//定义客户端 Id 要唯一ClientSecrets { new Secret("abc123zenabres89jijkomnlj".Sha256()) },//Client用来获取token// 混合模式AllowedGrantTyp…...

Sql 创建用户

Sql server 创建用户 Sql server 创建用户SQL MI 创建用户修改其他用户密码 Sql server 创建用户 在对应的数据库执行&#xff0c;该用户得到该库的所有权限 test.database.chinacloudapi.cn DB–01 DB–02 创建服务器登录用户 CREATE LOGIN test WITH PASSWORD zDgXI7rsafkak…...

vscode开启调试模式,结合Delve调试器调试golang项目详细步骤

1.前期准备 (1).在vs code中的扩展程序中搜索并安装Go扩展程序 (2).安装 Delve 调试器 go install github.com/go-delve/delve/cmd/dlvlatest (3).打开vs code的命令面板&#xff0c;输入Go: Install/Update Tools&#xff0c;并单击该命令执行&#xff0c;安装或更新Go语…...

搭建Hadoop分布式集群

软件和操作系统版本 Hadoop框架是采用Java语言编写&#xff0c;需要java环境&#xff08;jvm&#xff09; JDK版本&#xff1a;JDK8版本 &#xff0c;本次使用的是 Java: jdk-8u431-linux-x64.tar.gz Hadoop: hadoop-3.3.6.tar.gz 三台Linux虚拟节点: CentOS-7-x86_64-DVD-2…...

网络安全应急响应技术原理与应用

网络安全应急响应概述 “居安思危&#xff0c;思则有备&#xff0c;有备无患。”网络安全应急响应是针对潜在发生的网络安全事件而采取的网络安全措施。本节主要阐述网络安全响应的概念、网络安全应急响应的发展、网络安全应急响应的相关要求。 17.1.1 网络安全应急响应概念 网…...

01 Oracle自学环境搭建

1 Oracle12C安装 1.1 下载 官网地址&#xff1a;https://www.oracle.com/ 解压安装包 运行安装程序 1.2 安装 配置安全更新 软件更新 安装选项 系统类 Oracle主目录用户选择 使用现有windows用户&#xff1a;如果选择该项&#xff0c;则需要指定没有管理权限的用户。 创建新Wi…...

MYSQL----------MySQL权限管理

1 MySQL权限管理 .1.1 权限系统的工作原理 查看用户权限 -- 查看用户的权限 SHOW GRANTS FOR usernamelocalhost;解释&#xff1a;这条SQL语句用于查看指定用户在本地主机上的权限。其中username是要查看权限的用户。 .1.2 权限表的存取 查询权限表&#xff08;以user表为例&a…...

学习HLS.js

前言 HTTP 实时流&#xff08;也称为HLS&#xff08;.m3u8&#xff09;&#xff09;是一种基于HTTP的自适应比特率流通信协议。HLS.js依靠HTML5视频和MediaSource Extensions进行播放&#xff0c;其特点&#xff1a;视频点播和直播播放列表、碎片化的 MP4 容器、加密媒体扩展 …...

Zustand selector 发生 infinate loops的原因以及解决

Zustand selector 发生 infinate loops 做zustand tutorial project的时候&#xff0c;使用选择器方法引入store&#xff0c;出现Maximum update depth exceeded,也就是组件一直重新渲染&#xff0c;改成直接使用store就没有不会出现这个问题。如下&#xff1a; // const [xIs…...

Unity自定义编辑器:基于枚举类型动态显示属性

1.参考链接 2.应用 target并设置多选编辑 添加[CanEditMultipleObjects] using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor;[CustomEditor(typeof(LightsState))] [CanEditMultipleObjects] public class TestInspector :…...

donet (MVC)webAPI 的接受json 的操作

直接用对象来进行接收&#xff0c;这个方法还不错的。 public class BangdingWeiguiJiluController : ApiController{/// <summary>/// Json数据录入错误信息/// </summary>/// <param name"WeiguiInfos"></param>/// <returns></r…...

GitHub 新手入门指南

一、GitHub 简介 GitHub 是全球最大的代码托管平台&#xff0c;它基于 Git 版本控制系统&#xff0c;为开发者提供了一个集中存储、管理和协作开发代码的空间。在这里&#xff0c;你可以找到无数开源项目&#xff0c;也可以将自己的项目与全球开发者社区共享&#xff0c;促进知…...

Django后端相应类设计

通用的ApiResponse类&#xff1a;用于生成统一的 API 响应格式。每个响应都包含以下字段&#xff08;每个接口最终的返回数据格式&#xff09;&#xff1a; status_code&#xff1a;HTTP 状态码&#xff08;如 200、400、500 等&#xff09;message&#xff1a;响应的描述信息…...

完美解决VMware 17.0 Pro安装ubuntu、Deepin等虚拟机后卡顿、卡死问题

这两天在 VM 17 Pro 中安装了ubuntu 24.1 和Deepin 23.9 等Linux操作系统&#xff0c;在使用过程中出现过数次卡顿、卡死问题&#xff0c;现记录整理解决方法如下&#xff1a; 一、问题描述 安装虚拟机时、以及安装完成后正常使用时出现鼠标点击卡顿、系统反应慢、卡死等问题…...

前端 图片上鼠标画矩形框,标注文字,任意删除

效果&#xff1a; 页面描述&#xff1a; 对给定的几张图片&#xff0c;每张能用鼠标在图上画框&#xff0c;标注相关文字&#xff0c;框的颜色和文字内容能自定义改变&#xff0c;能删除任意画过的框。 实现思路&#xff1a; 1、对给定的这几张图片&#xff0c;用分页器绑定…...

【Oracle篇】深入了解执行计划中的访问路径(含表级别、B树索引、位图索引、簇表四大类访问路径)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;从事IT领域✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(…...

ROS2+OpenCV综合应用--11. AprilTag标签码跟随

1. 简介 apriltag标签码追踪是在apriltag标签码识别的基础上&#xff0c;增加了小车车体运动的功能&#xff0c;控制车体从而使摄像头会保持标签码在视觉中间左右运动&#xff0c;在根据物体在摄像头成像近大远小的原理根据这一特性&#xff0c;从而实现标签码跟随功能。 2. 启…...

第四、五章图论和网络爬虫+网络搜索

第四章 图论和网络爬虫 4.1 构建网络爬虫工程重点 构建网络爬虫的重点 用BFS还是DFS 在不考虑时间的情况下&#xff0c;这两种不同的搜索方法都可以在相同的时间下爬下整个静态的互联网内容&#xff0c;但是在现实中肯定是需要考虑时间以及互联网动态变化的。所以重点应该是如…...

PyMysql 01|(包含超详细项目实战)连接数据库、增删改查、异常捕获

目录 一、数据库操作应用场景 二、安装PyMysql 三、事务的概念 四、数据库的准备 五、PyMysql连接数据库 1、建立连接方法 2、入门案例 六、PyMysql操作数据库 1、数据库查询 1️⃣查询操作流程 2️⃣cursor游标 ​3️⃣查询常用方法 4️⃣案例 5️⃣异常捕获 …...

(No space left on device )

错误日志&#xff1a; org.springframe tipart.MultipartException: Failed to parse multipart servlet request: nested excepti /ROOT/upload_e5046403_6cd4_4673_3313_479fb76773fe_00000004.tmp (No space left on device ) 分析&#xff1a; (No space left on devi…...

Conmi的正确答案——Cordova使用“src-cordova/config.xml”编辑“Android平台”的“uses-permission”

Cordova版本&#xff1a;12.0.0 (cordova-lib12.0.1) 1、配置例程&#xff1a; <platform name"android"><config-file target"AndroidManifest.xml" parent"/manifest"><uses-permission android:name"android.permission…...

LLaMA-Factory web微调大模型并导出大模型

LLaMA-Factory 开源大模型如LLaMA&#xff0c;Qwen&#xff0c;Baichuan等主要都是使用通用数据进行训练而来&#xff0c;其对于不同下游的使用场景和垂直领域的效果有待进一步提升&#xff0c;衍生出了微调训练相关的需求&#xff0c;包含预训练&#xff08;pt&#xff09;&am…...

针对数据库系统安全的漏洞扫描加固工具【WebSocket + MySQL】

一、系统背景 随着信息技术的迅猛发展和互联网的普及&#xff0c;数据库作为存储、管理和检索大量数据的关键组件&#xff0c;其安全性对于企业和组织来说至关重要。然而&#xff0c;由于网络环境的复杂性和攻击手段的多样性&#xff0c;数据库面临着越来越多的安全威胁&#…...

汽车基础软件AutoSAR自学攻略(三)-AutoSAR CP分层架构(2)

汽车基础软件AutoSAR自学攻略(三)-AutoSAR CP分层架构(2) 下面我们继续来介绍AutoSAR CP分层架构&#xff0c;下面的文字和图来自AutoSAR官网目前最新的标准R24-11的分层架构手册。该手册详细讲解了AutoSAR分层架构的设计&#xff0c;下面让我们来一起学习一下。 Introductio…...

《PC 上的开源神经网络多模态模型:开启智能交互新时代》

《PC 上的开源神经网络多模态模型&#xff1a;开启智能交互新时代》 一、引言二、多模态模型基础剖析&#xff08;一&#xff09;核心概念解读&#xff08;二&#xff09;技术架构探秘 三、开源多模态模型的独特魅力&#xff08;一&#xff09;开源优势尽显&#xff08;二&…...

Docker Desktop 构建java8基础镜像jdk安装配置失效解决

Docker Desktop 构建java8基础镜像jdk安装配置失效解决 文章目录 1.问题2.解决方法3.总结 1.问题 之前的好几篇文章中分享了在Linux(centOs上)和windows10上使用docker和docker Desktop环境构建java8的最小jre基础镜像&#xff0c;前几天我使用Docker Desktop环境重新构建了一个…...

【算法】八大排序算法

这篇文章是对数据结构中 八大经典排序算法 的详解&#xff0c;包括其原理、实现过程、时间复杂度、空间复杂度及其适用场景。最后两种排序不常见&#xff0c;但仍收录了进来保持文章结构的完整性。 排序(Sort)是将无序的记录序列&#xff08;或称文件&#xff09;调整成有序的…...

pytest+allure 入门

使用allure如何生成自动化测试报​​​​​​告 &#xff1f;一文详解allure的使用 。_allure测试报告-CSDN博客 例子&#xff1a; import allure import pytest import osallure.epic("闹钟") allure.feature("闹钟增删") class TestSchedule():def setu…...

算法--最大公约数,最小公倍数

1. 求两个数的最大公约数&#xff0c;最小公倍数 解释&#xff1a;这里Mymin和Mymax函数是自定义用于获取两数最大值和最小值的 求最大公约数的时候只需要得到两数之中最小的一项&#xff0c;向下逐个判断直到等于1 求最小公倍数的时候只需要得到两数之中最大的一项&#xf…...

【跨域问题】

跨域问题 官方概念&#xff1a; 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域本质来说&#xff0c;是前端请求给到后端时候&#xff0c;请求头里面&#xff0c;有一个 Origin &#xff0c;会带上 协议域名端口号等&#xff1b;后端接受到请求&…...

为什么在二维卷积操作中,将宽度(W)维度放在高度(H)之前会破坏空间局部性原则,并影响缓存性能

空间局部性原则 空间局部性指的是程序倾向于访问与最近访问过的内存位置接近的内存位置。对于深度学习模型中的张量数据&#xff0c;这意味着当处理图像或特征图时&#xff0c;如果能够连续地访问相邻像素的数据&#xff0c;那么可以最大化利用CPU/GPU缓存&#xff0c;因为缓存…...

【C语言】_函数指针数组/转移表与回调函数

目录 1. 示例1&#xff1a;函数指针数组的简单使用 2. 示例2&#xff1a;多同类型函数调用 2.1 switch-case实现 2.2 switch-case函数指针 2.3 函数指针数组实现 3. 回调函数 关于函数指针&#xff0c;专栏文章链接如下&#xff1a;【C语言】_函数指针变量-CSDN博客https…...

《通过财报看企业》

“借贷关系”“净资产收益率”“财务报表”、净利润、盈利能力、现金流 第1章 净利润&#xff1a;决定一家公司的股价能涨多高 企业经营&#xff1a;存货周转率 企业市值&#xff1a;市值净利润市盈率 龙头企业&#xff1a;行业内收入规模最大、盈利能力最强&#xff0c;…...

年度技术突破奖|中兴微电子引领汽车芯片新变革

随着以中央计算区域控制为代表的新一代整车电子架构逐步成为行业主流&#xff0c;车企在电动化与智能化之后&#xff0c;正迎来以架构创新为核心的新一轮技术竞争。中央计算SoC&#xff0c;作为支撑智驾和智舱高算力需求的核心组件&#xff0c;已成为汽车电子市场的重要新增量。…...

力扣经典题目之912.排序数组(使用希尔排序解决)

今天继续给大家分享一道力扣的做题心得今天这道题目是 912.排序数组 题目链接&#xff1a;912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a;给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题…...

QT升级及下载缓慢的问题解决办法

QT升级及下载缓慢的问题解决办法 QT安装慢解决办法&#xff1a; 官方下载地址: https://www.qt.io/download-dev 点开后点击download 填写相关信息后即可下载完成 线上安装工具。 安装工具&#xff08;qt-online-installer-windows-x64-4.8.1.exe&#xff09; 如下图: 此时不…...

List详解 - 双向链表的操作

在C中&#xff0c;std::list是标准模板库&#xff08;STL&#xff09;中的一个容器&#xff0c;它实现了双向链表的数据结构。与数组或向量&#xff08;std::vector&#xff09;不同&#xff0c;std::list允许在常数时间内进行插入和删除操作&#xff0c;尤其是在链表的任意位置…...

公众号如何通过openid获取unionid

通过接口 https://api.weixin.qq.com/cgi-bin/user/info?access_tokenxxxxxxx&langzh_CN 返回的数据如下&#xff1a; 前提是必须绑定 微信开放平台 token如何获取呢 代码如下&#xff1a; String tokenUrl "https://api.weixin.qq.com/cgi-bin/token"; …...