vue element-ui table component dynamic multi-level header

The actual project requirements require that the information contained in the table header be initialized based on the back-end dynamic acquisition method, and a lot of information is regular, so we need Element UI to dynamically generate multi-level headers. The required renderings are as follows:

Since the statistical dimension is changeable (it can be provinces, cities or districts), it is necessary to set up a table of data to save the header, and then display the table in a loop using v-for="item in tableColData" header, because provinces and cities display header data in a loop, so if there is a second-level header in the province or city, you need to set an additional level of children in the header data, plus a second layer of v-for="item1 in item.children" to traverse the secondary header. code show as below:

 <el-table
     :cell-class-name="addClass"
      class="table_style"
      :data="tableData9"
      :header-cell-style="{
        backgroundColor: 'rgba(3,39,85,0.92)',
        color: '#BADCFF',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :cell-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :row-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      style="width: 100%"
      max-height="252"
    >
      <el-table-column
        v-for="item in tableColData"
         width="180px"
        :prop="item.id"
        :label="item.name"
        :key="item.id"
        :fixed="item.fixed"
      >
        <el-table-column
          width="180px"
          v-for="item1 in item.children"
          :prop="item1.id"
          :label="item1.name"
          :key="item1.id"
        >
        </el-table-column>
      </el-table-column>
    </el-table>

The header data format is as follows:

[{
    "id": "wd",
    "name": "时间维度"
  },
  {
    "id": "qu1",
    "name": "贵池区",
    "children": [
      {
        "id": "qu1-dy",
        "name": "当月"
      },
      {
        "id": "qu1-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu1-lj",
        "name": "累计"
      },
      {
        "id": "qu1-ljzz",
        "name": "累计增长"
      }
    ]
  },
  {
    "id": "qu2",
    "name": "东至县",
    "children": [
      {
        "id": "qu2-dy",
        "name": "当月"
      },
      {
        "id": "qu2-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu2-lj",
        "name": "累计"
      },
      {
        "id": "qu2-ljzz",
        "name": "累计增长"
      }
    ]
  }]

The data in the table is as follows:

[
  {
    "wd": "2月",
    "qu1-dy": "43.4",
    "qu1-dyzz": "-1.9%",
    "qu1-lj": "159.9",
    "qu1-ljzz": "-14.7%",
    "qu2-dy": "43.3",
    "qu2-dyzz": "-1.9%",
    "qu2-lj": "159.9",
    "qu2-ljzz": "-14.7%"
},
]

 It should be noted that each data field needs to correspond to the header id.