首页 > 其他分享 >el-tree 实现懒加载

el-tree 实现懒加载

时间:2023-06-30 16:36:25浏览次数:32  
标签:node el 树结构 level tree 如下 加载

为了解决数据量过大而导致的web页面卡死,我们采用懒加载的方式进行实现,

1. 首先,根据文档,我们在<el-tree>中加入 lazy 和   :load="loadNode" 如下图:

2. 在methods中写一下这个方法,如下图

 

说明一下,上图中的node.level === 0 时,我们在里面请求根节点的树结构,如下图:

 

 

然后,node.level >= 1 就是去请求接下来的层级了,根据你点击的节点来请求相对应的树结构数据,如下图:

 

 然后就可以了!

 

标签:node,el,树结构,level,tree,如下,加载
From: https://www.cnblogs.com/a973692898/p/17517165.html

相关文章

  • 一种基于DeltaE(CIE 1976)的找色算法
    //QuickFinder.cpp:此文件包含"main"函数。程序执行将在此处开始并结束。//#include<iostream>#define_USE_MATH_DEFINES#include<cmath>#include<ctime>unsignedcharbuf[1080][1920][3];constfloatparam_13=1.0f/3.0f;constfloatparam_1......
  • CubeMX TIM 配置AutoReloadPreload
    CubeMX 配置定时器的时候,出现如下选项: 成员变量AutoReloadPreload的取值范围TIM_AUTORELOAD_PRELOAD_DISABLE预装载功能关闭TIM_AUTORELOAD_PRELOAD_ENABLE预装载功能开启用于设置自动重载寄存器TIMx_ARR的预装载功能,即自动重装寄存器的内容是更新事件产生时写入有......
  • EasyExcel validator校验 及自定义 枚举校验
    需要校验的实体importcom.alibaba.excel.annotation.ExcelIgnore;importcom.alibaba.excel.annotation.ExcelProperty;importcom.alibaba.excel.annotation.write.style.ColumnWidth;importcom.ruoyi.system.domain.enums.RoleStatusEnum;importcom.ruoyi.system.domain......
  • 说说设计模式~管道模式(pipeline)
    说明复合的责任链,类似于管道模式,只要符合条件,说会向下传递,不会终止算法说明按最高优先级去使用,符合就用,不符合就走下一个策略具体链条,有点像pipeline管道模式BlackHandlerip=172.17.0.11RateLimitHandlerheader=is-blackWriteBlackHandlerheader=real-black继承......
  • BeanShell 后置处理程序 提取记录
    importjava.util.regex.Matcher;importjava.util.regex.Pattern;StringresponseData=prev.getResponseDataAsString();Patternpattern=Pattern.compile("砖石数\\[([0-9]+)\\]");Matchermatcher=pattern.matcher(responseData);if(matcher.find()){......
  • ionic LoadingController 使用cssClass改变加载样式
    以改变加载框的图表颜色和字体颜色为例在主题文件variables.scss中设置LoadingController需要改变的样式class以下使用主题颜色为加载框的图表颜色和字体颜色(当主题更改时随之改变)//加载框全局样式ion-loading.custom-loading{.loading-wrapper{--spinner-......
  • iis部署.netcore项目不允许put 和post,delete请求
    在webconfig中添加红色标记部分<?xmlversion="1.0"encoding="utf-8"?><configuration><system.webServer><modulesrunAllManagedModulesForAllRequests="true"><removename="WebDAVModule"/></......
  • Qt: Hello world
    0.Qt可以构建跨平台的ui项目.走一波windows下Helloworld1.下载QTcreator当下版本是10了.下载速度极慢.需要30G的硬盘空间.2.安装成功后,开始菜单会产生如下效果:3.运行QTcreator10.0.1(community),如下:4.点击:创建项目4.1 无需,理解显示的内容,选第......
  • XML PHP SimpleXMLElement Object数组转化为普通数组
    做微信第三方接口接入的时候发现接口返回的数据都是xml格式的。以下是如何把xml格式转化为普通的数组格式取值。xml格式数据:$xmlstr="<xml><mch_appid>".$data['mch_appid']."</mch_appid><mchid>".$data['mchid']."</mchid>......
  • C#中获取Excel文件中的表名
     excel文件中第一个表名的缺省值是sheet1$,但有时也会被改变为其他名字.如果需要在C#中使用OleDb读写Excel文件,就需要知道这个名字是什么.以下代码就是实现这个功能的:usingSystem;usingSystem.IO;usingSystem.Data;usingSystem.Data.OleDb;na......