项目中需要用到一个四级嵌套跨行表格，多反调试之后做个备忘，table循环跟ul、li不一样，因为tr不能嵌套，只能分多次判断然后循环出tr和td。
在线预览地址：四级跨行嵌套表格
下面简单分析一下：
一共需分为8种情况：
（1）1-1-1-1
这一种是最简单的，我们只需要输出每一层级的第一条就行
（2）1-1-1-2...
第四级数据中大于1的情况，这种也简单，直接把最后一级的索引值从1开始取就可以
（3）1-1-2-1 && 1-1-2-2...
这两种要写在一起，因为第三级有可能多条，要保证循环一条第三级数据紧接着就循环他下面的第四级数据
（4）1-2.....
这一类包含四种，1-2-1-1,1-2-1-2,1-2-2-1,1-2-2-2，也要都写在一起，跟第上面第（3）条思想一样
下面开始贴代码：
我们的原始数据是这样的一棵树：
[
{
"id": "20200819114914431512978282739397",
"title": "1",
"children": [
{
"id": "20200819114914431988275545379160",
"title": "1-1",
"children": [
{
"id": "20200819114914431377777323620755",
"title": "1-1-1",
"children": [
{
"id": "20200819114914431065815836218987",
"title": "1-1-1-1",
"score": "1",
},
{
"id": "20200819114914431326477656591155",
"title": "1-1-1-2",
"score": "1",
}
]
},
{
"id": "20200819114914431905044736667004",
"title": "1-1-2",
"children": [
{
"id": "20200819114914431486082512558725",
"title": "1-1-2-1",
"score": "2",
},
{
"id": "20200819114914431118667752846076",
"title": "1-1-2-2",
"score": "1",
}
]
},
{
"id": "20200819114914431707324758821087",
"title": "1-1-3",
"children": [
{
"id": "20200819114914431258440217023181",
"title": "1-1-3-1",
"score": "5",
}
]
},
{
"id": "20200819114914431862121680793147",
"title": "1-1-4",
"children": [
{
"id": "20200819114914431874685436939791",
"title": "1-1-4-1",
"score": "3",
}
]
},
]
}
]
},
{
"id": "20200819114914447842529244730509",
"title": "2",
"children": [
{
"id": "20200819114914447624569744115581",
"title": "2-1",
"children": [
{
"id": "20200819114914447285773048280298",
"title": "2-1-1",
"children": [
{
"id": "20200819114914447819334606460065",
"title": "2-1-1-1",
"score": "2",
},
{
"id": "20200819114914447694695507844228",
"title": "2-1-1-2",
"score": "4",
},
{
"id": "20200819114914447229039325972787",
"title": "2-1-1-3",
"score": "2",
},
{
"id": "20200819114914447294852468617886",
"title": "2-1-1-4",
"score": "2",
}
]
},
{
"id": "20200819114914447505221806998993",
"title": "2-1-2",
"children": [
{
"id": "20200819114914447720249453847851",
"title": "2-1-2-1",
"score": "4",
},
{
"id": "20200819114914447828365527250571",
"title": "2-1-2-2",
"score": "4",
}
]
}
]
},
{
"id": "20200819114914447096808820872104",
"title": "2-2",
"children": [
{
"id": "20200819114914447691995108798337",
"title": "2-2-1",
"children": [
{
"id": "20200819114914447481425897762791",
"title": "2-2-1-1",
"score": "3",
},
{
"id": "20200819114914447201468421830553",
"title": "2-2-1-2",
"score": "3",
}
]
},
{
"id": "20200819114914447852169208559011",
"title": "2-2-2",
"children": [
{
"id": "20200819114914447674409118911751",
"title": "2-2-2-1",
"score": "1",
},
{
"id": "20200819114914447448689850164774",
"title": "2-2-2-2",
"score": "1",
},
{
"id": "20200819114914447100263681761375",
"title": "2-2-2-3",
"score": "2",
}
]
}
]
},
{
"id": "20200819114914447603935335608743",
"title": "2-3",
"children": [
{
"id": "20200819114914447848672720497805",
"title": "2-3-1",
"children": [
{
"id": "20200819114914447829883067630878",
"title": "2-3-1-1",
"score": "1",
},
{
"id": "20200819114914447002047114035466",
"title": "2-3-1-2",
"score": "2",
},
{
"id": "20200819114914447820110186017040",
"title": "2-3-1-3",
"score": "3",
}
]
},
{
"id": "20200819114914447913126208866185",
"title": "2-3-2",
"children": [
{
"id": "20200819114914447649722011046838",
"title": "2-3-1-1",
"score": "2",
},
{
"id": "20200819114914447441560655860340",
"title": "2-3-1-2",
"score": "2",
}
]
}
]
}
]
},
]我们要初始化一下，给前三级添加rowspan属性，让我们知道每一父级跨几行
//时间原因我直接手动循环的，应该可以递归，会的同学可以写到评论了
setRowSpan:function(arr){
var that=this;
arr.forEach(val=>{
var num1=0;
val.children.forEach(val2=>{
var num2=0;
val2.children.forEach(val3=>{
val3.rowspan=val3.children.length;
num2+=val3.rowspan;
})
val2.rowspan=num2;
num1+=val2.rowspan;
})
val.rowspan=num1;
})
that.tableData=[].concat(arr);
}（1）1-1-1-1
{{item.title}}
{{key.title}}
{{data.title}}
{{info.title}}
{{info.score}}
（2）1-1-1-2...
{{info.title}}
{{info.score}}
（3）1-1-2-1 && 1-1-2-2...
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
（4）1-2.....
{{key.title}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
完整代码如下，可以直接复制到本地进行预览：
Examples
一级
二级
三级
四级
分值
{{item.title}}
{{key.title}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
{{key.title}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
{{data.title}}
{{info.title}}
{{info.score}}
{{info.title}}
{{info.score}}
还有其他的方法吗？跟开发沟通过，他说可以给我只有一级的json数据，因为嵌套类型的table循环出来的数据也都是一级的（tr）,只不过每一条json数据的属性数量不同，但是都要包含第四级数据和其他属性，并且给我每一级跨几行，前端直接循环就可以了，我理解的数据结构是这样的：
[
{
firstTitle:'1',//第1级标题
firstRowSpan:6//第1级跨几行
secondTitle:'1-1',//第2级标题
secondRowSpan:6//第2级跨几行
thirdTitle:'1-1-1',//第3级标题
thirdRowSpan:2//第3级跨几行
fourTitle:'1-1-1-1',//第4级标题
score:'1'//其他属性值
},
//第二条就没有一级二级三级属性了，开始显示1-1-1-2
{
fourTitle:'1-1-1-2',
score:'1'
},
{
thirdTitle:'1-1-2',
thirdRowSpan:2
fourTitle:'1-1-2-1',
score:'1'
},
{
fourTitle:'1-1-2-2',
score:'1'
}
....
]