Element UI 动态生成多级表头（无线套娃）

在Element UI中，要动态生成多级表头，可以使用el-table-column的嵌套形式，并通过v-for指令来遍历定义好的表头数据。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="(header, index) in headers">
      <el-table-column
        v-if="header.children && header.children.length"
        :key="`header-${index}`"
        :label="header.label">
        <el-table-column
          v-for="(child, childIndex) in header.children"
          :key="`child-${index}-${childIndex}`"
          :prop="child.prop"
          :label="child.label">
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-else
        :key="`header-${index}`"
        :prop="header.prop"
        :label="header.label">
      </el-table-column>
    </template>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据项
      ],
      headers: [
        {
          label: '一级列头',
          prop: 'firstLevelProp',
          children: [
            { label: '二级列头1', prop: 'secondLevelProp1' },
            { label: '二级列头2', prop: 'secondLevelProp2' }
          ]
        },
        {
          label: '一级列头2',
          prop: 'firstLevelProp2'
        }
      ]
    };
  }
};
</script>

在这个例子中，headers数组定义了表格的所有列及其层级关系。v-for指令用于递归地生成每一级的表头，如果该列有子列，则递归生成子列。tableData数组提供了表格的数据源。这样就可以根据需求动态生成多级表头了。