el-table实现多行表头

在Element UI库中的`el-table`组件中，实现多行表头通常是在使用`el-table-column`时通过嵌套`<template>`标签，并配合`v-for`循环来完成的。下面是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="index" label="序号"></el-table-column>
    
    <!-- 多行表头 -->
    <template v-for="(headerItem, index) in headerItems">
      <el-table-column
        :key="index"
        :label="headerItem.title"
        :prop="headerItem.prop || 'name'"
        :formatter="headerItem.formatter" <!-- 如果有自定义格式化函数 -->
        v-if="headerItem.children" <!-- 当headerItem有子项表示多行 -->
        :show-overflow-tooltip="true"> <!-- 展开列头显示更多信息 -->
        <template slot-scope="scope">
          <span v-for="subHeader in headerItem.children">{{ subHeader.content }}</span>
        </template>
      </el-table-column>
      
    </template>
    
    <!-- 正常的单行表头 -->
    <el-table-column
      v-for="(normalItem, index) in normalHeaderItems"
      :key="index"
      :label="normalItem.label"
      :prop="normalItem.prop"
      :formatter="normalItem.formatter">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ...,
      headerItems: [
        { title: '姓名', children: [{ content: '全名' }, { content: '简称' }] },
        { title: '性别', children: [] }
      ],
      normalHeaderItems: [
        { label: '年龄', prop: 'age' },
        { label: '职位', prop: 'position' }
      ]
    };
  }
};
</script>

在这个例子中，`headerItems`数组包含了一组需要展开的多行表头，每个元素都有一个`title`属性作为主标题，而其`children`属性则包含了子标题。当用户点击主标题时，会展示对应的子标题。