优化elemen-ui的el-table的tree树结构因数据过多卡顿问题

最近遇到一个要在elemen-ui的el-table放一个树结构的表数据
但是因为数据实在过多,而且列也有四五列,还有操作列
dom操作频繁导致页面非常的卡顿

网上看了很多种方法以及elementui的官方方法
使用lazy和load方法终于解决

对应el-table

<el-table v-if="refreshTable" v-loading="loading" :data="list" row-key="id" lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

一、获取后端数据

1、设置一份list展示,为了不全部渲染导致页面卡顿,将list的children数据置空,再设置hasChildren 为true表示有展开数据
2、完全拷贝一份数据 listCopy 保存下来,后面查找子节点

getList() {this.loading = true;//获取后端接口数据listOrgAll(this.queryParams).then(res => {this.list = res.datathis.listCopy = JSON.parse(JSON.stringify(res.data)) // 备份的全量数据this.list.map(item => {if(item.children.length > 0) {item.hasChildren = trueitem.children = []}})this.loading = false;});},

2、load方法

递归查找备份的全量数据,找到对应的children数据,将children数据返回

// 树结构获取数据load(tree, treeNode, resolve) {// 查找子节点数据function findNodeById (node, id) {// 找到对应id数据if (node.id === id) {// 拷贝当前节点数据const newNode = { ...node };if (newNode.children && newNode.children.length > 0) {// 修改查找到的对应id的children数据,把找到的数据里面的children数据置空,并设置hasChildrennewNode.children = newNode.children.map(child => {return {id: child.id,name: child.name,parentId: child.parentId,// 设置hasChildren判断是否显示展开按钮hasChildren: child.children.length >0 ? true : false,children: []  // 置空子节点};});}return newNode.children;}// 递归查找每一层的children数据if (node.children && node.children.length > 0) {for (let i = 0; i < node.children.length; i++) {const result = findNodeById(node.children[i], id);if (result) {return result;}}}return null;}const foundNode = findNodeById(this.listCopy[0], tree.id);console.log(foundNode);resolve(foundNode)},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677427.shtml

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

相关文章

定金和订金主要区别

定金和订金主要区别 定金和订金主要区别利弊分析合同示例订金合同示例定金合同示例 定金和订金主要区别 对比项定金订金定义为保证债务履行&#xff0c;先行支付一定数额的货币作为担保预付款&#xff0c;表明购房意愿的一种支付手段数额限制通常不得超过主合同标的额的20%数额…

Stable Diffusion 模型下载:GhostMix(幽灵混合)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 GhostMix 是绝对让你惊艳的模型&#xff0c;也是自己认为现在最强的2.5D模型。我认为模型的更新应该是基于现有的画面整体不大变的前提下&#xff0c;提高模型的成…

单片机学习笔记---蜂鸣器工作原理

目录 蜂鸣器介绍 蜂鸣器的驱动方式 ULN2003D芯片工作原理 实战预备知识&#xff1a;基础乐理 音名的分组 全音和半音的关系 音高的表示 五线谱中的符号定义 简谱上的符号定义 C调音符与频率对照表 相关计算 蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件&a…

给我的用户kewei,升级为免密root权限

要在Ubuntu系统中让用户 kewei 具有免密码执行sudo命令的权限&#xff0c;你需要编辑sudoers文件。这可以通过使用visudo命令来安全地进行。请按照以下步骤操作&#xff1a; 打开终端。 输入以下命令来编辑sudoers文件&#xff1a; sudo visudo这将使用默认的文本编辑器&#…

C++,stl,list容器详解

目录 1.list基本概念 2.list构造函数 3.list的赋值和交换 4.list大小操作 5.list的插入的删除 6.list数据存取 7.list反转和排序 排序案例 1.list基本概念 2.list构造函数 #include<bits/stdc.h> using namespace std;void print(const list<int> &lk) …

Maui blazor ios 按设备类型设置是否启用safeArea

需求&#xff0c;新做了个app&#xff0c; 使用的是maui blazor技术&#xff0c;里面用了渐变背景&#xff0c;在默认启用SafeArea情况下&#xff0c;底部背景很突兀 由于现版本maui在SafeArea有点bug&#xff0c;官方教程的<ContentPage SafeAreafalse不生效&#xff0c;于…

H5/CSS 笔试面试考题(71-80)

简述哪种输入类型用于定义周和年控件(无时区)( ) A:date B:week C:year 面试通过率:67.0% 推荐指数: ★★★★★ 试题难度: 初级 试题类型: 选择题 答案:b 简述下列哪个元素表示外部资源?该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性…

防火墙USG6000V配置接口实验

要求:防火墙向下使用子接口分别对应生产区和办公区,所有分区设备可以ping通网关 最终效果部分示例:client1,Server1,PC2都能ping通网关 实现流程: 云要添加虚拟网卡ip(此处用的是创建的虚拟环回ip),更改端口映射为双向通道且更改编号 SW1:#要先登录防火墙初始账号和密码,然后…

SSL和Kerberos身份验证的区别?

SSL&#xff08;Secure Sockets Layer&#xff0c;安全套接层&#xff09;和 Kerberos&#xff08;一种网络认证协议&#xff09;都是用于提供身份验证和加密通信的技术。它们有以下主要区别&#xff1a; 目的&#xff1a; SSL 主要用于保护基于Web的应用的通信安全。而 Kerb…

电商小程序05用户注册

目录 1 搭建页面2 设置默认跳转总结 我们上一篇拆解了登录功能&#xff0c;如果用户没有账号就需要注册了。本篇我们介绍一下注册功能的实现。 1 搭建页面 打开应用&#xff0c;点击左上角的新建页面 输入页面的名称&#xff0c;用户注册 删掉网格布局&#xff0c;添加表单容…

Qt网络编程-ZMQ的使用

不同主机或者相同主机中不同进程之间可以借助网络通信相互进行数据交互&#xff0c;网络通信实现了进程之间的通信。比如两个进程之间需要借助UDP进行单播通信&#xff0c;则双方需要知道对方的IP和端口&#xff0c;假设两者不在同一主机中&#xff0c;如下示意图&#xff1a; …

查看系统进程信息的Tasklist命令

Tasklist命令是一个用来显示运行在本地计算机上所有进程的命令行工具&#xff0c;带有多个执行参数。另外&#xff0c;Tasklist可以代替Tlist工具。通过任务管理器&#xff0c;可以查看到本机完整的进程列表&#xff0c;而且可以通过手工定制进程列表方式获得更多进程信息&…

7 scala的类构造器

在创建对象的时候&#xff0c;需要调用类的构造器。Scala 提供了主构造器和辅助构造器。 1 主构造器 与 Java 一样&#xff0c;如果我们没有特别定义&#xff0c;那么 Scala 提供的默认构造器是没有参数的。 我们可以在类名后&#xff0c;指定构造器的参数列表&#xff0c;列…

回归预测模型:MATLAB多项式回归

1. 多项式回归模型的基本原理 多项式回归是线性回归的一种扩展&#xff0c;用于分析自变量 X X X与因变量 Y Y Y之间的非线性关系。与简单的线性回归模型不同&#xff0c;多项式回归模型通过引入自变量的高次项来增加模型的复杂度&#xff0c;从而能够拟合数据中的非线性模式。…

【北邮鲁鹏老师计算机视觉课程笔记】02 filter

1 图像的类型 二进制图像&#xff1a; 灰度图像&#xff1a; 彩色图像&#xff1a; 2 任务&#xff1a;图像去噪 噪声点让我们看得难受是因为噪声点与周边像素差别很大 3 均值 滤波核 卷积核 4 卷积操作 对应相乘再累加起来 卷积核记录了权值&#xff0c;把权值套到要卷积…

GPT-4模型的创造力

超级的创造力是GPT-4等高级语言模型的重要特征之一。它们不仅能够精确地模拟和再现各类文本样式、结构和内容&#xff0c;而且在生成新的文本时&#xff0c;能够通过深度学习算法对海量训练数据中捕捉到的模式进行创新性的重组与拓展&#xff1a; 词汇创新&#xff1a;基于已学…

Redis——集群环境部署

一般情况下的Redis&#xff0c;我们都是在一台服务器上进行操作的&#xff0c;也就是说读、写以及备份操作都是在一台Redis服务器上进行的。随着项目访问量的增加&#xff0c;对Redis服务器的操作也更加频繁&#xff0c;虽然Redis读写速度都很快&#xff0c;但是一定程度上也会…

统一身份认证系统架构设计与实践总结

随着互联网的快速发展和应用的普及&#xff0c;人们在各个网站和应用上需要不同的账号和密码进行身份认证。为了解决这个问题&#xff0c;统一身份认证系统应运而生。本文将总结统一身份认证系统的架构设计与实践经验&#xff0c;帮助读者了解如何设计和实现一个高效、安全的统…

〖大前端 - ES6篇②〗- let和const

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

ORACLE的 软 软 软 解析!

在海鲨数据库架构师精英群里,有位朋友说ORACLE 有 软软软解析. 就是把执行计划缓存在客户端里,从而避免去服务端找执行计划. 他给了个设置方法, Weblogic console->datasource->connectionPool Statement Cache Type >LRU Statement Cache Size100 CURSOR_NUMBER …