vue两种数据有没有办法生成这种table

Question

第一种数据 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>&nbsp;</td>
    </tr>
    <tr>
        <td>DD</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>C</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

来张图

Answer 1

使用合并单元格功能呢