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