树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿

news2025/1/10 16:30:53

el-table
树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿

//vue 表头要增加lazy :load="load"
<el-table
          lazy
          stripe
          border
          ref="table"
          row-key="id"
          :load="load"
          :data="tableData"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
          style="width: 100%"
          :height="tableHeight"
        >
请求树
handleQuery() {
      //GetTree为数据接口
      GetTree().then(res => {
        if (res.errorCode === "000000") {
            this.total = res.data.length
            //备份所有的数据
            const list = res.data || [];
            const listFun = (ele, level) => {
                //因为系统最多能添加五级,增加了叶子节点
                if (level >= 5) {
                    ele.leafFlag = true;
                } else {
                    ele.leafFlag = false;
                }
                if (ele.children && ele.children.length > 0) {
                    level = level + 1;
                    ele.children.map((childEle) => {
                        listFun(childEle, level);
                    });
                } else {
                    delete ele.children;
                }
            };
            list.map((element) => {
                let level = 1;
                listFun(element, level);
            });
            this.tableDataCopy = list;
            const listCopy = JSON.parse(JSON.stringify(list));
            //初始化表格展示一级类目
            this.tableData = listCopy.map((item) => {
                item.hasChildren = item.children && item.children.length > 0;
                item.children = null;
                item.levelIdList = [item.id];
                return item;
            });
        }
      })
    },
load (row, treeNode, resolve) {
    // 层级关系备份
    const idCopy = JSON.parse(JSON.stringify(row.levelIdList))
    // 查找下一层数据
    let resolveArr = this.tableDataCopy
    let id
    // eslint-disable-next-line
    while (id = row.levelIdList.shift()) {
        const tarItem = resolveArr.find(item => item.id === id);
        tarItem.loadedChildren = true
        resolveArr = tarItem.children
    }

    // 处理下一层数据的属性
    resolveArr = JSON.parse(JSON.stringify(resolveArr))
    resolveArr.forEach(item => {
        item.hasChildren = item.children && item.children.length > 0;
        item.children = null;
        // 此处需要深拷贝,以防各个item的levelIdList混乱
        item.levelIdList = JSON.parse(JSON.stringify(idCopy))
        item.levelIdList.push(item.id)
    })

    // 标识已经加载子节点
    row.loadedChildren = true
    // 渲染子节点
    resolve(resolveArr)
},

在这里插入图片描述
无需等待 点击一下就出来了

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

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

相关文章

MySQL之数据的导入、导出远程备份

目录 一. navicat的导入、导出 1.1 导入 1.2 导出 二. mysqldump命令导入、导出 2.1 导出 2.2 导入 三. LOAD DATA INFILE 命令导入、导出 3.1 设置 3.2 导出 3.3 导入 3.4 查看secure_file_priv设置 四. 远程备份 4.1 导出 4.2 导入 五. 思维导图 一. navicat的导入、导…

ChatGPT4 助力 Python 数据分析与可视化、人工智能建模及论文高效撰写

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年4月&#xff0c;更强版本的ChatGPT4.0上线&#xff0c;文本、语音、图像等多模态交互方式使其在…

如何用GPT写代码?

详情点击链接&#xff1a;如何用GPT写代码&#xff1f; 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二定制自己的GPTs…

12、JVM高频面试题

1、JVM的主要组成部分有哪些 JVM主要分为下面几部分 类加载器&#xff1a;负责将字节码文件加载到内存中 运行时数据区&#xff1a;用于保存java程序运行过程中需要用到的数据和相关信息 执行引擎&#xff1a;字节码文件并不能直接交给底层操作系统去执行&#xff0c;因此需要…

24年教资报名千万不要卡在照片上,看看照片有啥要求?

每年都有很多人教资报名卡在照片上&#xff0c;总是审核不通过&#xff0c;24年教资报名千万不要卡在照片上&#xff0c;快来看看照片有啥要求吧&#xff1f;如果还没有准备&#xff0c;可以支付宝搜索【亿鸣证件照】或者微信搜索【随时照】小程序&#xff0c;然后进入小程序的…

麒麟Linux安装新版微信的方法

麒麟Linux系统目前有v10和v10sp1&#xff0c;注意&#xff0c;恶趣味的是v10和v10sp1竟然不通用&#xff0c;这导致了一些国产程序出现运行bug,通过系统自带的麒麟商店无法图形界面安装&#xff0c;甚至搜索不到微信等等一系列问题&#xff0c;易用度确实很差。 解决办法也很简…

七人拼团模式:社交电商的新面目

随着社交电商的快速发展&#xff0c;七人拼团模式作为一种创新的商业模式&#xff0c;正在引领着一场消费革命。它不仅改变了消费者的购物习惯&#xff0c;还为电商平台带来了巨大的流量和收入。本文将深入探讨七人拼团模式的玩法、优势、发展趋势以及如何为电商平台带来可观收…

Netty-Netty基础应用与了解

前言 Netty 的优势 1、 API 使用简单&#xff0c;开发门槛低&#xff1b; 2、功能强大&#xff0c;预置了多种编解码功能&#xff0c;支持多种主流协议&#xff1b; 3、定制能力强&#xff0c;可以通过 ChannelHandler 对通信框架进行灵活地扩展&#xff1b; 4、性能高…

BGP协议概念与配置(HCIP完整版)

目录 一、BGP协议基础 1、路由的分类 2、为什么要使用BGP协议 3、BGP概述 4、AS号 二、BGP协议概述 1、场景 2、作用 3、优势 4、BGP邻居类型 5、BGP特征 6、BGP报文类型 7、BGP工作过程 8、BGP状态 9、BGP路由默认优先级为255 10、BGP邻居关系建立的完整流程 …

【深度学习:视觉基础模型】视觉基础模型 (VFM) 解释

【深度学习&#xff1a;视觉基础模型】视觉基础模型 VFM 解释 了解视觉基础模型从 CNN 到 Transformer 的演变自我监督和适应能力 流行的视觉基础模型DINO&#xff08;自蒸馏&#xff0c;无标签&#xff09;SAM&#xff08;分段任意模型&#xff09;SegGPTMicrosofts Visual Ch…

【uview2.0】Keyboard 键盘 与 CodeInput 验证码输入 结合使用 uview

https://www.uviewui.com/components/codeInput.html &#xff08;CodeInput 验证码输入&#xff09; https://www.uviewui.com/components/keyboard.html &#xff08;Keyboard 键盘&#xff09; <u-keyboard mode"number" :dotDisabled"true" :show&q…

分割、合并、转换、重组:强大的自部署 PDF 处理工具 | 开源日报 No.143

Stirling-Tools/Stirling-PDF Stars: 13.2k License: GPL-3.0 这个项目是 Stirling-PDF&#xff0c;它是一个功能强大的基于本地主机的 Web PDF 操作工具&#xff0c;使用 Docker 进行部署。其主要功能包括分割、合并、转换、重新组织 PDF 文件以及添加图片、旋转和压缩等多种…

供应链+低代码,实现数字化【共赢链】转型新策略

在深入探讨之前&#xff0c;让我们首先明确供应链的基本定义。供应链可以被理解为一个由采购、生产、物流配送等环节组成的网状系统&#xff0c;它始于原材料的采购&#xff0c;经过生产加工&#xff0c;最终通过分销和零售环节到达消费者手中。 而数字化供应链&#xff0c;则是…

STM32F103RCT6使用数据手册及应用示例程序分享

STM32F103RCT6是意法半导体&#xff08;STMicroelectronics&#xff09;推出的一款Cortex-M3内核的高性能微控制器。它具有丰富的外设功能和强大的处理能力&#xff0c;适用于多种应用场景。 要进行手册数据分析&#xff0c;首先需要下载并查阅STM32F103RCT6的技术参考手册。可…

三菱plc学习入门(三,FB模块)

小编很抱歉&#xff0c;因为小编是以基恩士&#xff0c;三菱的plc一起学习并找发现不同&#xff01;&#xff01;&#xff01;并结合工作的案例来进行学习&#xff0c;所以内容上与系统的学习还是存在差异。如果只是单独的学习此篇文章&#xff0c;如果对您有帮助&#xff0c;欢…

回归预测 | Matlab基于SO-BiLSTM蛇群算法优化双向长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SO-LSTM蛇群算法优化长短期记忆神经网络的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SO-LSTM蛇群算法优化长短期记忆神经网络的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SO-BiLSTM蛇群算法优…

深入了解鸿鹄电子招投标系统:Java版企业电子招标采购系统的核心功能

随着市场竞争的加剧和企业规模的扩大&#xff0c;招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量&#xff0c;我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标&#xff0c;使得招标采购的质量更高、速度更快&#xff0c;同…

Kubernetes/k8s的存储卷/数据卷

k8s的存储卷/数据卷 容器内的目录和宿主机的目录挂载 容器在系统上的生命周期是短暂的&#xff0c;delete&#xff0c;k8s用控制创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态 一旦回到初始状态&#xff0c;所有的后天编辑的文件都会消失…

pytorch10:正则化(weight_decay、dropout、Batch Normalization)

目录 一、正则化regularization1.概念2.过拟合3.减小方差策略4 正则化--权值衰减 二、正则化-dropout2.1 dropout概念2.2 数据尺度变化2.3 nn.Dropout2.4 两种模式 三、Batch Normalization3.1 ICS现象&#xff08;Internal Covariate Shift&#xff0c;内部协变量偏移)3.2 BN原…

Web实战丨基于django+html+css+js的学院门户网站

文章目录 写在前面项目概述基本信息项目需求 项目框架程序设计运行结果项目总结 写在后面 写在前面 本期内容&#xff1a;基于DjangoHtmlCssJavaScript的学院门户网站 项目需求&#xff1a; pythondjango 项目下载地址&#xff1a;https://download.csdn.net/download/m0_6…