element 表格动态表头合并

<template>
  <div>
    <p>表格数据</p>
    <button @click="btn1">加1</button>
    <button @click="btn2">加2</button>
    <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
            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: "a1" },
                { label: "业务3", prop: "a3" },
              ],
            },
          ],
        },
        {
          label: "销售量1",
          list: [
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
          ],
        },
        {
          label: "销售量2",
          list: [
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
          ],
        },
      ],
      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: {
    btn1() {
      this.tableLabel.push({
        label: "销售量2",
        list: [
          {
            label: "内容1",
            list: [{ label: "内容1", prop: "a4" }],
          },
        ],
      });
    },
    btn2() {
      this.tableLabel.push({
        label: "销售量2",
        list: [
          {
            label: "内容1",
            list: [{ label: "内容1", prop: "a4" }],
          },
          {
            label: "内容1",
            list: [{ label: "内容1", prop: "a4" }],
          },
        ],
      });
    },
    headerStyle({ row, rowIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex == 0) {
        for (let i = 0; i < this.tableLabel.length; i++) {
          row[i].rowSpan = 2;
        }
      }
      if (rowIndex == 1) {
        let numyy = 0 // 记录第二排长度
        for (let i = 0; i < this.tableLabel.length; i++) {
          const newArr = this.tableLabel[i].list
          numyy = numyy + newArr.length
          if ( newArr.length > 1) {
            row[numyy-2].rowSpan = 0;
            row[numyy-1].rowSpan = 0;
          }else{
            row[numyy-1].rowSpan = 0;
          }
        }
      }
    },
  },
};
</script>
 
<style>
</style>