el-table如何设置两行行表头

在Element UI的el-table组件中，如果你想设置两个行的表头，你可以通过自定义渲染`header-cell`属性来实现这个需求。下面是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 表头第一行 -->
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column prop="name" label="姓名" header-align="center">
      <template slot-scope="scope">
        <span>{{ scope.$index + 1 }}.</span> {{ scope.row.name }}
      </template>
    </el-table-column>

    <!-- 表头第二行 -->
    <el-row class="custom-header-row">
      <el-col :span="4" align="center">
        <el-badge type="primary">操作</el-badge>
      </el-col>
      <el-col :span="8" align="right">
        <el-badge type="success">状态</el-badge>
      </el-col>
    </el-row>

    <!-- 数据列 -->
    <el-table-column prop="age" label="年龄"></el-table-column>
    <!-- ...其他列... -->

    <!-- 自定义内容区域 -->
    <template slot="appendHeader" slot-scope="props">
      <div v-for="(item, index) in props.columns" :key="index">
        <el-row :gutter="20" :justify="item.headerAlign || 'start'" :class="{ 'custom-header-row': item.type === 'index' }">
          <!-- 根据需要添加单元格内容 -->
          <el-col :span="item.colSpan" v-if="item.label">{{ item.label }}</el-col>
          <!-- 或者直接使用v-html展示HTML内容 -->
          <el-col :span="item.colSpan" v-if="!item.label">
            <span v-html="item.title || ''"></span>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据...
      ]
    };
  }
};
</script>

<style scoped>
.custom-header-row {
  background-color: #f5f5f5;
  line-height: 36px;
}
</style>

在这个例子中，我们首先设置了常规的第一行表头，然后在`appendHeader`插槽里添加了一个`el-row`，每列对应一个`el-col`，模拟了第二行的表头样式。

注意，由于`el-row`和`el-col`是用于布局的元素，所以在处理复杂的动态头部时，可能需要配合Vue的计算属性、条件渲染等技术来调整显示内容。