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);
},