项目中需要用到一个四级嵌套跨行表格，多反调试之后做个备忘，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
<!-- 1 -->
<template v-for='(item,itemIndex) in tableData'>
<tr>
<td :rowspan="item.rowspan">{{item.title}}</td>
<!-- 1-1 -->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<td :rowspan="key.rowspan">{{key.title}}</td>
<!-- 1-1-1 -->
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<td :rowspan="data.rowspan">{{data.title}}</td>
<!-- 1-1-1-1 -->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</template>
</template>
</tr>
</template>（2）1-1-1-2...
<!-- 1-1-1-2... -->
<template v-for='(item,itemIndex) in tableData'>
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
</template>（3）1-1-2-1 && 1-1-2-2...
<!-- 1-1-2-1 && 1-1-2-2... -->
<template v-for='(item,itemIndex) in tableData'>
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex > 0'>
<tr>
<td :rowspan="data.rowspan">{{data.title}}</td>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</tr>
<!--紧接着循环第二条，数据少的时候也正常，多了就发现循环出错了-->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
</template>（4）1-2.....
<template v-for='(item,itemIndex) in tableData'>
<!--1-2-->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex > 0'>
<tr>
<td :rowspan="key.rowspan">{{key.title}}</td>
<!--1-2-1-->
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<td :rowspan="data.rowspan">{{data.title}}</td>
<!--1-2-1-1-->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</template>
</tr>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<!--1-2-1-2...-->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
<!--1-2-2-->
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex > 0'>
<tr>
<td :rowspan="data.rowspan">{{data.title}}</td>
<!--1-2-2-1-->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</tr>
<!--1-2-2-2-->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
</template>完整代码如下，可以直接复制到本地进行预览：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content='webkit'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Examples</title>
<style>
.eval-table{border:1px solid #e8e8e8;border-collapse:collapse;width:100%}
.eval-table th{background:#f6f9fe;}
.eval-table th,.eval-table td{border:1px solid #e8e8e8; line-height:30px;text-align:center;}
.eval-table td{position:relative; padding:5px;}
</style>
</head>
<body>
<div id="app">
<table class="eval-table">
<tr>
<th>一级</th>
<th>二级</th>
<th>三级</th>
<th>四级</th>
<th>分值</th>
</tr>
<!-- 1 -->
<template v-for='(item,itemIndex) in tableData'>
<tr>
<td :rowspan="item.rowspan">{{item.title}}</td>
<!-- 1-1 -->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<td :rowspan="key.rowspan">{{key.title}}</td>
<!-- 1-1-1 -->
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<td :rowspan="data.rowspan">{{data.title}}</td>
<!-- 1-1-1-1 -->
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</template>
</template>
</tr>
<!-- 1-1-1-2... -->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
<!-- 1-1-2-1 && 1-1-2-2... -->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex == 0'>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex > 0'>
<tr>
<td :rowspan="data.rowspan">{{data.title}}</td>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</tr>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
<!-- 1-2..... -->
<template v-for='(key,keyIndex) in item.children' v-if='keyIndex > 0'>
<tr>
<td :rowspan="key.rowspan">{{key.title}}</td>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<td :rowspan="data.rowspan">{{data.title}}</td>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</template>
</tr>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex == 0'>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
<template v-for='(data,dataIndex) in key.children' v-if='dataIndex > 0'>
<tr>
<td :rowspan="data.rowspan">{{data.title}}</td>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex == 0'>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</template>
</tr>
<template v-for='(info,infoIndex) in data.children' v-if='infoIndex > 0'>
<tr>
<td>{{info.title}}</td>
<td>{{info.score}}</td>
</tr>
</template>
</template>
</template>
</template>
</table>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
mounted:function(){
this.setRowSpan(this.items);
},
data:{
tableData:[],
items: [
{
"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",
}
]
}
]
}
]
},
]
},
methods:{
//给前三级添加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);
}
}
})
</script>
</body>
</html>还有其他的方法吗？跟开发沟通过，他说可以给我只有一级的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'
}
....
]
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。