element表格表头第一列合并

如图所示需求

 思路：用二级表头展示，再隐藏二级表头

 

 直接上代码

<template>
  <div>
    <p>表格数据</p>
    <el-table
      :data="tableData"
      border
      height="400px"
      max-height="400px"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      :header-cell-style="headerStyle"
      fit
    >
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :min-width="item.width"
        :label="item.label"
        show-overflow-tooltip
        align="center"
      >
        <el-table-column
          v-for="(itemchildren, indexchildren) in item.list"
          :key="indexchildren"
          :prop="itemchildren.prop"
          :min-width="itemchildren.width"
          :label="itemchildren.label"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableLabel: [
        {
          label: "合并的头",
          list: [
            { label: "任意内容1", prop: "a1" },
            { label: "任意内容2", prop: "a2" }
          ],
        },
        { label: "内容1", prop: "a3" },
        { label: "内容2", prop: "a4" },
        { label: "内容3", prop: "a6" },
      ],
      tableData: [
        { a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
        { a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
        { a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
      ],
    };
  },
  methods: {
    headerStyle({rowIndex}) {
      console.log(rowIndex);
      if (rowIndex == 1) return { display: 'none' };
    }
  },
};
</script>
 
<style>
</style>