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

本文主要是介绍关于el-table中tree 懒加载默认3层及自动展开，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.问题

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

2.数据结构

经过探索，发现了el-table是通过treeData，和lazyTreeNodeMap 来控制懒加载数据对表格进行控制的。其中treeData的数据结构为
treeData数据结构
其主要用来保存数据结构，关系，展开、加载的状态的信息和父子关系；
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);
},