element表格表头合并（多级合并）

需求：在多级后面合并行和列

 官方是按层级一层一层套，但是没有多级表头后面合并的案例，于是参考官网header-cell-style属性，可以自定义合并行或列

首先：按照官网给出的例子我们先把数据渲染成这样

然后根据header-cell-style属性编辑携带的参数编辑（也可以根据rowIndex、columnIndex自定义，rowSpan表示占高（行）、colSpan表示占宽（列））

headerStyle({ row, rowIndex }) {
  // console.log(row, column, rowIndex, columnIndex);
  if (rowIndex == 0) {  // 把第1行的第2、3列变为占两行高度的表格
    row[1].rowSpan = 2;
    row[2].rowSpan = 2;
  }
  if (rowIndex == 1) { // 第2行的原本第2行的1、2、3、4列高度变成0
    row[1].rowSpan = 0;
    row[2].rowSpan = 0;
    row[3].rowSpan = 0;
    row[4].rowSpan = 0;
  }
},

附单页完整代码：

<template>
  <div>
    <p>表格数据</p>
    <el-table
      :data="tableData"
      border
      height="400px"
      max-height="400px"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :header-cell-style="headerStyle"
      :highlight-current-row="true"
      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
            v-for="(itemchildrenson, indexchildrenson) in itemchildren.list"
            :key="indexchildrenson"
            :prop="itemchildrenson.prop"
            :min-width="itemchildrenson.width"
            :label="itemchildrenson.label"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableLabel: [
        {
          label: "大标题",
          list: [
            {
              label: "二标题",
              list: [
                { label: "业务1", prop: "sale" },
                { label: "业务2", prop: "const" },
                { label: "业务3", prop: "profit" },
              ],
            },
          ],
        },
        {
          label: "销售量1",
          list: [
            { label: "内容1", list: [{ label: "内容1", prop: "sale" }] },
            { label: "内容2", list: [{ label: "内容2", prop: "sale" }] },
          ],
        },
        {
          label: "销售量2",
          list: [
            { label: "内容1", list: [{ label: "内容1", prop: "sale" }] },
            { label: "内容2", list: [{ label: "内容2", prop: "sale" }] },
          ],
        },
      ],
      tableData: [
        { id: 1, date: "2018-07-24", profit: 35394.05 },
        { id: 2, const: 102203.71, profit: 35394.05 },
      ],
    };
  },
  methods: {
    headerStyle({ row, rowIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex == 0) {  // 把第1行的第2、3列变为占两行高度的表格
        row[1].rowSpan = 2;
        row[2].rowSpan = 2;
      }
      if (rowIndex == 1) { // 第2行的原本第2行的1、2、3、4列高度变成0
        row[1].rowSpan = 0;
        row[2].rowSpan = 0;
        row[3].rowSpan = 0;
        row[4].rowSpan = 0;
      }
    },
  },
};
</script>
 
<style>
</style>