el-table合并表头

在Element UI的表格组件`el-table`中，合并表头通常通过`row-key`属性和自定义列模板(`cell` prop)来实现。当你需要显示部分单元格跨越多行时，可以使用`row-key`来跟踪每一行的唯一标识，并结合数组索引来动态生成嵌套的数据结构。

例如，你可以创建一个包含父级和子级信息的对象数组：

data: {
  tableData: [
    { key: '1', parentKey: 'parent1', children: [{ key: '1-1' }, { key: '1-2' }] },
    { key: '2', parentKey: 'parent2', children: [] }
  ]
}

然后在`cell`模板中检查当前行是否是子行，如果是，则渲染子行的内容，否则只显示父级数据：

<template slot-scope="scope">
  <el-table-column type="index" label="序号"></el-table-column>
  <el-table-column v-for="(item, index) in scope.row.children" :key="item.key" :label="item.parentKey + '-' + index + (scope.$index === 0 ? '' : '-child')">
    <!-- 自定义内容 -->
    {{ item.label }}
  </el-table-column>
  <template v-if="!scope.row.children || scope.$index === 0"> <!-- 如果是父级行 -->
    <el-table-column :label="scope.row.parentKey">{{ scope.row.key }}</el-table-column>
  </template>
</template>

这样，当渲染时，表头会自动合并显示，第一列作为固定列，后续列则根据`parentKey`合并。