如何在多个rowSpan中分配分层数据

Question

我对多个 rowSpan 中的分层数据有疑问。我想我可以制作下面这种桌框。但当分层的多重数据进来时，就很难对数据进行细化。我只能想到使用“地图”方法。有人有迭代数据的好主意吗？

数据形式应该是这样的

 CHOICE_CHECKUP_MOCK = [
{
    category_name: "ChoiceA",
    possible_count: 1,
    checkup_list: [
        {
            middle_checkup_name: "ChoiceA middle list1",
            checkups: [
                {
                    name: "SubClass 1-1",
                    code: "code 1-1",
                    description: "description 1-1",
                    price: 0,
                },
                {
                    name: "subClass 1-2",
                    code: "code 1-2",
                    description: "description 1-2",
                    price: 0,
                },
            ],
        },
        {
            middle_checkup_name: "ChoiceA middle list2",
            checkups: [
                {
                    name: "checkups_name3",
                    code: "checkups_code3",
                    description: "checkups_description3",
                    price: 0,
                },
                {
                    name: "checkups_name4",
                    code: "checkups_code4",
                    description: "checkups_description4",
                    price: 0,
                },
            ],
        },
    ],
},
{
    category_name: "ChoiceB",
    possible_count: 1,
    checkup_list: [
        {
            middle_checkup_name: "ChoiceB middleClassList1",
            checkups: [
                {
                    name: "SubClass 1-1",
                    code: "code 1-1",
                    description: "description 1-1",
                    price: 0,
                },
                {
                    name: "subClass 1-2",
                    code: "code 1-2",
                    description: "description1-2",
                    price: 0,
                },
                {
                    name: "subClass 1-2",
                    code: "code 1-2",
                    description: "description 1-2",
                    price: 0,
                },
            ],
        },
        {
            middle_checkup_name: "ChoiceB MiddleClassList2",
            checkups: [
                {
                    name: "checkups_name3",
                    code: "checkups_code3",
                    description: "checkups_description3",
                    price: 0,
                },
                {
                    name: "checkups_name4",
                    code: "checkups_code4",
                    description: "checkups_description4",
                    price: 0,
                },
            ],
        },
    ],
},

表格应该是这样的

到目前为止我所做的是，如果我想合并几行，请添加 rowSpan 并在 tr 的第一个 td 中输入尽可能多的数字。并且 tr 应该是第一行将被合并。

目前这只是硬编码数据。我想适当地完善该数据。

如果有人知道如何优化该表的数据，请告诉我......谢谢

Answer 1

嘿，你得到正确答案了吗？