本文主要是介绍关于el-table中tree 懒加载默认3层及自动展开，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.问题
项目有用到el-table中使用tree 发现最多tree只显示到3层，及不能够自动展开的。
2.数据结构
经过探索，发现了el-table是通过treeData，和lazyTreeNodeMap 来控制懒加载数据对表格进行控制的。其中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);
},
这篇关于关于el-table中tree 懒加载默认3层及自动展开的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
