elementPlus el-table表头嵌套，递归

Element Plus是一个基于Vue.js的开源UI组件库，它对Element UI进行了现代化和功能增强。关于`el-table`（Element Plus表格组件），如果想要实现表头嵌套（即层级结构的数据展示在表头中）并采用递归的方式，通常会在数据结构中包含嵌套的对象或数组，并在表头模板中使用递归来动态生成。

例如，假设你有一个类似这样的数据结构：

{
  "title": "父级标题",
  "children": [
    {
      "title": "子级1标题",
      "columns": [
        {"name": "字段1"},
        {"name": "字段2"}
      ]
    },
    {
      "title": "子级2标题",
      "columns": [
        {"name": "字段3"},
        {"name": "字段4"}
      ]
    }
  ]
}

在`el-table`的列定义部分，你可以通过条件渲染和递归函数来构建嵌套的表头：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(headerItem, index) in headers" :key="index">
      <template #default="{ row }">
        <!-- 如果 headerItem.children 存在，就显示展开/收起按钮 -->
        <el-collapse v-if="headerItem.children">
          <el-collapse-item :title="headerItem.title">
            <template v-for="(subHeader, subIndex) in headerItem.columns">
              <el-table-column :key="subIndex">{{ subHeader.name }}</el-table-column>
            </template>
          </el-collapse-item>
        </el-collapse>
        <!-- 如果没有子级，直接显示单层标题 -->
        <span v-else>{{ headerItem.title }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 这里填入你的实际数据
      headers: [/* 根据上面的数据结构填充 */]
    };
  }
};
</script>