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

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 x这样些row.id会乱掉  改回data.id
     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);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59