How to use element table to merge cells to achieve the desired effect

gets a three-tier nested data in the format of

[
  {
    name: 1,
    id: 1,
    children: [
      {
        name: 2,
        id: 2,
        children: [
          {
            name: 3,
            id: 3
          }
        ]
      }
    ]
  },
  {
    name: 4,
    id: 4,
    children: [
      {
        name: 5,
        id: 5,
        children: [
          {
            name: 6,
            id: 6
          }
        ]
      }
    ]
  }
]

the demand generates rows according to the number of second-level menus. If there are several second-level menus in the first-level menu, merge this first-level menu with several lines. The effect picture is roughly as follows:

how should I cycle through the data in table and do the function of merging cells? ask the bosses to give me an idea

May.17,2022

single column dynamic merge reference: https://codeshelper.com/q/10...
multiple column dynamic merge reference: https://codeshelper.com/a/11...

Menu