关于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,一经查实,立即删除!

相关文章

docker安装文档

原文链接Overview of Docker Desktop | Docker Docs Docker does not provide support for running Docker Desktop in nested virtualization scenarios. We recommend that you run Docker Desktop for Linux natively on supported distributions.运行在Windows平台内虚拟机…

【读书笔记】我在北京送快递-胡安焉

【读书笔记】 我在北京送快递 胡安焉 83个笔记 第一章 我在物流公司上夜班的一年 高级的写字楼里面,可能是各种996,各种离谱到家的项目。 不过我是在离开后,才从网上了解到这一点的;当我还在那里上班时,虽然也为它的…

【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…

你好,C++(1)C++是什么?C++的“前世今生”

转载:你好,C++(1)C++是什么?C++的“前世今生” - 知乎 (zhihu.com) The world is built on C++. ——Herb Sutter the chairman of the ISO C++ standards committee and chief native languages architect at Microsoft前传 C++世界地图 如果我们要到某个陌生的地方…

CSS三大特性(层叠性、继承性、优先级)

一、层叠性 1.样式冲突&#xff0c;就近原则&#xff0c;那个样式离着结构近&#xff0c;就执行那个样式&#xff1b; 2.样式不冲突&#xff0c;不会重叠。 二、继承性 &#xff08;1&#xff09;子元素可以继承父元素的样式&#xff08;text-&#xff0c;font-&#xff0c…

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、函数份文…

Java集合扩容机制深度解析

引言 在Java中&#xff0c;ArrayList 和 HashMap 是常见的集合类&#xff0c;它们的性能与扩容机制密切相关。在本文中&#xff0c;我们将深入剖析这两个集合类的扩容机制&#xff0c;透过底层实现理解它们在元素数量增加时如何进行动态扩容。 1. ArrayList的扩容机制 1.1 初…

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 】 前言&#…