vue两种数据有没有办法生成这种table
第一种数据 list
[ {
"id": 1,
"name": "A",
"parent_id": 0
},
{
"id": 2,
"name": "B",
"parent_id": 0
},
{
"id": 3,
"name": "C",
"parent_id": 0
},
{
"id": 4,
"name": "AA",
"parent_id": 1
},
{
"id": 5,
"name": "BB",
"parent_id": 1
},
{
"id": 6,
"name": "CC",
"parent_id": 2
},
{
"id": 7,
"name": "DD",
"parent_id": 2
},
{
"id": 8,
"name": "AAA",
"parent_id": 4
},
{
"id": 9,
"name": "BBB",
"parent_id": 4
},
{
"id": 10,
"name": "CCC",
"parent_id": 4
},
{
"id": 11,
"name": "DDD",
"parent_id": 5
}
]
第二种数据 list 树形结构，这个数据也是由第一种数据转换过来的
[ {
"id": 1,
"name": "A",
"parent_id": 0,
"children": [
{
"id": 4,
"name": "AA",
"parent_id": 1,
"children": [
{
"id": 8,
"name": "AAA",
"parent_id": 4
},
{
"id": 9,
"name": "BBB",
"parent_id": 4
},
{
"id": 10,
"name": "CCC",
"parent_id": 4
}
]
},
{
"id": 5,
"name": "BB",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "DDD",
"parent_id": 5
}
]
}
]
},
{
"id": 2,
"name": "B",
"parent_id": 0,
"children": [
{
"id": 6,
"name": "CC",
"parent_id": 2
},
{
"id": 7,
"name": "DD",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "C",
"parent_id": 0
}
]
这种数据结构，有没有办法生成下面这种 table 表格
<table width="100%" border="1" cellpadding="1" cellspacing="1"> <tr>
<td rowspan="4">A</td>
<td rowspan="3">AA</td>
<td>AAA</td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>CCC</td>
</tr>
<tr>
<td>BB</td>
<td>DDD</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>CC</td>
<td> </td>
</tr>
<tr>
<td>DD</td>
<td> </td>
</tr>
<tr>
<td>C</td>
<td> </td>
<td> </td>
</tr>
</table>
来张图
回答：
使用合并单元格功能呢
以上是 vue两种数据有没有办法生成这种table 的全部内容， 来源链接： utcz.com/p/937519.html
