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

el-tree数据量过大,造成浏览器卡死、崩溃

el-tree数据量过大,造成浏览器卡死、崩溃

在这里插入图片描述

场景:树形结构展示,数据超级多,超过万条,每次打开都会崩溃

我这里采用的是引入新的插件虚拟树,它是参照element-plus 中TreeV2改造vue2.x版本虚拟化树形控件,不论你的数据量多大,虚拟树都能毫无压力地处理。

虚拟树传送门:https://sangtian152.github.io/virtual-tree/zh/demo/#attributes

前面下载引入这里就不多赘述了,都一样的。

具体代码如下:

<vl-treeref='tree'class='filter-tree':props='defaultProps':data='dataList':height='430'show-checkbox:expand-on-click-node='false':default-checked-keys='defaultChecked':default-expanded-keys='defalutExpanded':filter-methods='filterMethod'></vl-tree>

别的都和el-tree差不多,不会用的可以点传送门去看看,里面属性方法都有的。

但是用这个还有一个问题就是,当数据量过大且都选中的时候,回显的时候会超级超级慢,而且还会崩溃,但是这个时候是由于回显的数据过多引起的。尝试了好多方法都不行,分时函数都用上了,虽然不崩溃了,但是超级慢。

后来的解决办法是:

回显的时候,调用后端接口,让后端只返回选中的父节点,让它自动关联选中子节点,暂时解决了这个问题。

相关文章:

el-tree数据量过大,造成浏览器卡死、崩溃

el-tree数据量过大&#xff0c;造成浏览器卡死、崩溃 场景&#xff1a;树形结构展示&#xff0c;数据超级多&#xff0c;超过万条&#xff0c;每次打开都会崩溃 我这里采用的是引入新的插件虚拟树&#xff0c;它是参照element-plus 中TreeV2改造vue2.x版本虚拟化树形控件&…...

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-A

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-A 目录 2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-A 需要环境或者解析可以私信 &#xff08;二&#xff09;A 模块基础设施设置/安全加固&#xff08;200 分&…...

面向LLM的App架构——业务维度

这是两篇面向LLM的大前端架构的第一篇&#xff0c;主要写我对LLM业务的认知以及由此推演出的大前端架构。由于我是客户端出身&#xff0c;所以主要以客户端角度来描述&#xff0c;并不影响对前端的适用性。 对LLM的认知 基于Google对AGI的论文&#xff0c;AGI或者LLM一定会朝…...

ElasticSearch之cat plugins API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/plugins?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; name component version…...

【小米电脑管家】安装使用教程--非小米电脑

安装说明功能体验下载资源 Xiaomi HyperOS发布后&#xff0c;小米妙享电脑端独立版本也走向终点&#xff0c;最新的【小米电脑管家】将会内置妙享实现万物互联。那么本篇文章将分享非小米电脑用户如何绕过设备识别验证安装使用【小米电脑管家】实现万物互联 安装说明 1.解压文…...

视频讲解|基于多目标粒子群算法的配电网储能选址定容

1 主要内容 该视频为3012基于多目标粒子群算法的配电网储能选址定容matlab代码讲解内容&#xff0c;对应的资源下载链接为基于多目标粒子群算法的配电网储能选址定容&#xff0c;程序主要内容是&#xff1a;以系统节点电压水平&#xff08;电网脆弱性&#xff09;、网络损耗以…...

Android 13 - Media框架(22)- MediaCodec(三)

这一节开始我们将重新回到 MediaCodec 这一层来学习 buffer 的流转 status_t MediaCodec::dequeueOutputBuffer(size_t *index,size_t *offset,size_t *size,int64_t *presentationTimeUs,uint32_t *flags,int64_t timeoutUs) {sp<AMessage> msg new AMessage(kWhatDequ…...

git提交报错 fatal: LF would be replaced by CRLF in package-lock.json

报错 fatal: LF would be replaced by CRLF in package-lock.json 原因 git 在windows下&#xff0c;默认是CRLF作为换行符&#xff0c; git add 提交时&#xff0c;会检查文本中是否有LF 换行符&#xff08;linux系统&#xff09;&#xff0c;如果有则会告警&#xff0c; 所…...

卷积详解和并行卷积

ps&#xff1a;在 TensorFlow Keras 中&#xff0c;构建 Sequential 模型的正确方式是将层作为列表传递&#xff0c;而不是作为一系列单独的参数。 modelmodels.Sequential([layers&#xff0c;layers]) 而不是modelmodels.Sequential(layers&#xff0c;layers) 文章目录 卷积…...

c#生成二维码二维码中间添加定制LoGo

&#x1f680;介绍 &#x1f340;QRCoder是一个开源的.NET库&#xff0c;用于生成QR码&#xff08;Quick Response Code&#xff09;。这个库是用C#编写的&#xff0c;并且可以在.NET框架的各种版本上使用&#xff0c;包括.NET Framework, .NET Core, Mono, Xamarin等。QRCode…...

设计CPU功能的数字电路

实验目的(1)熟悉Multisim 电路仿真软件的操作界面和功能; (2)掌握逻辑电路综合设计,并采用仿真软件进行仿真。 实验内容1.试设计一个简易CPU功能的数字电路,实验至少要求采用4个74HC/HCT194作为4个存储单元(可以预先对存储单元存储数据),74HC283作为计算单元。请实现…...

在windows下编译libiconv库

libiconv是一个基于GNU协议的开源库,主要用于解决多语言编码处理转换等应用问题。在linux系统使用比较方便,但是windows下使用需要进行源码编译。这里我是使用libiconv的1.15版本源码和VS2019默认工具集配置进行编译。 首先需要用VS2019创建一个空项目,根目录为libiconv。 在…...

html,css,开发知识,调试知识

nget 方式提交 n使用 get 方式提交数据时&#xff0c;表单数据会附加在 URL 之后&#xff0c;由用户端直接发送至服务器&#xff0c;所以速度比 post 快&#xff0c;但缺点是数据长度不能太长。 npost 方式提交 n使用 post 时&#xff0c;表单数据是与 URL 分开发送的&#…...

Vulnerability: File Upload(Medium)--MYSQL注入

选择难度&#xff1a; 1.打开DVWA&#xff0c;并登录账户 2.选择模式&#xff0c;这里我们选择 文件上载的中级模式&#xff08;Medium&#xff09; 准备工作 1.在vsc里面写个一句话木马 2.下载BurpSuiteCommunit软件&#xff1a;百度搜索“burp suite官网” 下载地址www…...

短视频账号剪辑矩阵+无人直播系统源头开发

抖去推爆款视频生成器&#xff0c;通过短视频矩阵、无人直播&#xff0c;文案引流等&#xff0c;打造实体商家员工矩阵、用户矩阵、直播矩阵&#xff0c;辅助商家品牌曝光&#xff0c;团购转化等多功能赋能商家拓客引流。 短视频矩阵通俗来讲就是批量剪辑视频和批量发布视频&am…...

Python traceback模块:获取异常信息

异常对象提供了一个 with_traceback 用于处理异常的传播轨迹&#xff0c;查看异常的传播轨迹可追踪异常触发的源头&#xff0c;也可看到异常一路触发的轨迹。 下面示例显示了如何显示异常传播轨迹&#xff1a; class SelfException(Exception): passdef main():firstMethod() …...

单点登录方案调研与实现

作用 在一个系统登录后&#xff0c;其他系统也能共享该登录状态&#xff0c;无需重新登录。 演进 cookie → session → token →单点登录 Cookie 可以实现浏览器和服务器状态的记录&#xff0c;但Cookie会出现存储体积过大和可以在前后端修改的问题 Session 为了解决Co…...

HarmonyOS应用开发者基础认证考试(稳过)

判断题 ​​​​​​​ 1. Web组件对于所有的网页都可以使用zoom(factor: number)方法进行缩放。错误(False) 2. 每一个自定义组件都有自己的生命周期正确(True) 3. 每调用一次router.pushUrl()方法&#xff0c;默认情况下&#xff0c;页面栈数量会加1&#xff0c;页面栈支持的…...

日常开发日志

目录 1、idea开发服务启动的网页地址不显示前端样式&#xff1a; 2、java Date 与myibits 的空判断&#xff1a; 1、idea开发服务启动的网页地址不显示前端样式&#xff1a; idea开发时&#xff0c;tomcat启动的后端弹出的网页地址&#xff0c;呈现的网页没有样式&#xff0…...

【FMCW毫米波雷达设计 】 — FMCW波形

原书&#xff1a;FMCW Radar Design 1 引言 本章研究驱动FMCW雷达的主要波形:线性调频(LFM)波形。我们研究信号的行为及其性质。随后&#xff0c;本章讨论了匹配滤波理论&#xff0c;并研究了压缩这种波形的技术&#xff0c;特别是所谓的拉伸处理&#xff0c;它赋予FMCW雷达极…...

项目介绍 MATLAB实现基于概率路图法(PRM)进行无人机三维路径规划的详细项目实例(含模型描述及部分示例代码) 专栏近期有大量优惠 还请多多点一下关注 加油 谢谢 你的鼓励是我前行的动力 谢谢支持

MATLAB实现基于概率路图法&#xff08;PRM&#xff09;进行无人机三维路径规划的详细项目实例 更多详细内容可直接联系博主本人 或者访问对应标题的完整博客或者文档下载页面&#xff08;含完整的程序&#xff0c;GUI设计和代码详解&#xff09; 随着无人机技术的快速发展&…...

3分钟掌握RegRipper:Windows注册表取证分析的终极武器

3分钟掌握RegRipper&#xff1a;Windows注册表取证分析的终极武器 【免费下载链接】RegRipper3.0 RegRipper3.0 项目地址: https://gitcode.com/gh_mirrors/re/RegRipper3.0 你是否曾面对Windows注册表文件感到无从下手&#xff1f;想知道如何快速提取关键数字证据&…...

如何用kepano-obsidian构建你的终极知识管理系统:从零到精通的完整指南

如何用kepano-obsidian构建你的终极知识管理系统&#xff1a;从零到精通的完整指南 【免费下载链接】kepano-obsidian My personal Obsidian vault template. A bottom-up approach to note-taking and organizing things I am interested in. 项目地址: https://gitcode.com…...

关于统好 AI可持续发展三大趋势

问&#xff1a;如何理解统好 AI 的可持续发展趋势&#xff1f;答&#xff1a;统好 AI 的可持续发展&#xff0c;核心是技术、业务与运营长期适配&#xff0c;不追求短期迭代&#xff0c;而是围绕企业全生命周期需求构建稳定演进路径。绵阳统好软件有限公司以一体化底座为基础&a…...

RyTuneX深度实战:Windows系统性能调优与隐私保护最佳实践

RyTuneX深度实战&#xff1a;Windows系统性能调优与隐私保护最佳实践 【免费下载链接】RyTuneX RyTuneX is a cutting-edge optimizer built with the WinUI 3 framework, designed to amplify the performance of Windows devices. Crafted for both Windows 10 and 11. 项目…...

你的QQ空间记忆正在消失?GetQzonehistory帮你永久保存青春时光

你的QQ空间记忆正在消失&#xff1f;GetQzonehistory帮你永久保存青春时光 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 你是否曾担心QQ空间里的珍贵回忆会随着时间流逝而消失&#x…...

新手友好!Qwen3-ASR-1.7B镜像使用全攻略:从安装到实战

新手友好&#xff01;Qwen3-ASR-1.7B镜像使用全攻略&#xff1a;从安装到实战 1. 为什么选择Qwen3-ASR-1.7B&#xff1f; 语音识别技术正在改变我们处理音频内容的方式。Qwen3-ASR-1.7B作为阿里云通义千问团队开发的开源语音识别模型&#xff0c;在识别精度和语言支持方面表现…...

Graphormer惊艳案例:从SMILES到三维构象倾向性预测的延伸应用探索

Graphormer惊艳案例&#xff1a;从SMILES到三维构象倾向性预测的延伸应用探索 1. 模型概述 Graphormer是微软研究院开发的一款基于纯Transformer架构的图神经网络模型&#xff0c;专门为分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测而设计。与传统图神…...

汇川PLC与IS620N伺服驱动实战:手把手教你完成EtherCAT网络配置与电机命名

汇川PLC与IS620N伺服驱动深度配置指南&#xff1a;从EtherCAT组态到电机精准控制 在工业自动化领域&#xff0c;伺服系统的稳定性和响应速度直接决定了设备性能的上限。汇川AM600系列PLC搭配IS620N伺服驱动组成的EtherCAT网络&#xff0c;正成为越来越多自动化工程师的首选方案…...

高效漫画收藏解决方案:打造你的离线数字漫画库

高效漫画收藏解决方案&#xff1a;打造你的离线数字漫画库 【免费下载链接】picacomic-downloader 哔咔漫画 picacomic pica漫画 bika漫画 PicACG 多线程下载器&#xff0c;带图形界面 带收藏夹&#xff0c;已打包exe 下载速度飞快 项目地址: https://gitcode.com/gh_mirrors…...