el-table动态生成多级表头

在 `el-table` 组件中，可以使用 `el-table-column` 组件生成表格列，而 `el-table-column` 组件的一个重要属性是 `children`，可以用来设置多级表头。因此，可以通过动态生成 `el-table-column` 组件来动态生成多级表头。

以下是一个示例代码：

<el-table :data="tableData" style="width: 100%">
  <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :width="column.width" :align="column.align">
    <template v-if="column.children" slot-scope="scope">
      <el-table-column v-for="(subColumn, subIndex) in column.children" :key="subIndex" :label="subColumn.label" :prop="subColumn.prop" :width="subColumn.width" :align="subColumn.align"></el-table-column>
    </template>
  </el-table-column>
</el-table>

在上述代码中，`columns` 是一个数组，用于存储表头列的属性。如果一个表头列具有子列，则在该列对象中添加 `children` 属性，该属性的值也是一个数组，存储子列的属性。

例如，下面是一个包含两级表头的 `columns` 数组：

data() {
  return {
    columns: [
      { label: '姓名', prop: 'name', width: 120, align: 'center' },
      {
        label: '详细信息',
        children: [
          { label: '年龄', prop: 'age', width: 80, align: 'center' },
          { label: '性别', prop: 'gender', width: 80, align: 'center' }
        ]
      },
      { label: '地址', prop: 'address', width: 300, align: 'left' }
    ],
    tableData: [
      { name: '张三', age: 18, gender: '男', address: '北京市朝阳区' },
      { name: '李四', age: 20, gender: '女', address: '上海市浦东新区' },
      { name: '王五', age: 22, gender: '男', address: '广州市天河区' }
    ]
  }
}

在 `el-table-column` 组件中，如果一个列具有子列，则使用 `v-if` 动态生成子列。在子列中，使用 `v-for` 循环遍历子列属性，动态生成子列。

这样就可以通过动态生成 `el-table-column` 组件来动态生成多级表头。