element ui table 特殊列头合并 (官方文档上无)

 直接上效果图和代码

html

<el-table
          v-loading="listLoading"
          v-adaptive="{ bottomOffset: 72 }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="300"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            prop="regionName"
            label="行政区"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="regionCode"
            label="行政区代码"
          >
          </el-table-column>
          <el-table-column align="center" label="蓄水工程">
            <el-table-column align="center" label="数量">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="storeWaterNum"
                  label="座"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="总库容">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="storeWaterCapacity"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="现状供水能力">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="supplyWaterAbility"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="引提水工程">
            <el-table-column align="center" label="数量">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="carryWaterNum"
                  label="座"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="现状供水能力">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="carryWaterAbility"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="调水工程">
            <el-table-column align="center" label="数量">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="transferWaterNum"
                  label="处"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="现状供水能力">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="transferWaterAbility"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="水井工程">
            <el-table-column align="center" label="水井数">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="wellWaterNum"
                  label="眼"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="现状供水能力">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="wellWaterCapacity"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column label="抗旱应急（备用）水源工程">
            <el-table-column align="center" label="农村供水能力">
              <el-table-column align="center" label="人饮">
                <el-table-column
                  align="center"
                  prop="ncgsnlry"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="town" label="灌溉">
                <el-table-column
                  align="center"
                  prop="ncgsnlgg"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="城镇供水能力">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="ccgsnl"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              label="总供水能力"
            >
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="zgsnl"
                  label="万 m3"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column label="抗旱服务组织">
            <el-table-column align="center" label="县级服务组织">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="xjfwzz"
                  label="有√"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="人数">
              <el-table-column align="center">
                <el-table-column
                  align="center"
                  prop="khfwzzrs"
                  label="人"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              label="应急抗旱能力"
            >
              <el-table-column
                align="center"
                label="机动浇地能力"
              >
                <el-table-column
                  align="center"
                  prop="jdjdnl"
                  label="亩/天"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                label="应急送水能力"
              >
                <el-table-column
                  align="center"
                  prop="yjssnl"
                  label="吨/次"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column label="县级抗旱预案">
            <el-table-column align="center">
              <el-table-column align="center">
                <el-table-column align="center" prop="xjkhya" label="有√">
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column label="抗旱物资库">
            <el-table-column align="center">
              <el-table-column align="center">
                <el-table-column prop="khwzk" align="center" label="有√">
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column label="土壤墒情站数量">
            <el-table-column align="center">
              <el-table-column align="center">
                <el-table-column align="center" prop="trsqzsl" label="个"> </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table-column>
<el-table-column
            label="操作"
            show-overflow-tooltip
            align="center"
            fixed="right"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="medium"
                >编辑</el-button
              >
              <el-button type="text" size="medium">操作记录</el-button>
            </template>
          </el-table-column>
        </el-table>

vuejs

data() {
    return {
        tableData: [
          {
              regionName: "行政区",
              regionCode: "行政区代码",
              storeWaterNum: "1",
              storeWaterCapacity: "2",
              supplyWaterAbility: "3",
              carryWaterNum: "4",
              carryWaterAbility: "5",
              transferWaterNum: "6",
              transferWaterAbility: "7",
              wellWaterNum: "8",
              wellWaterCapacity: "9",
              ncgsnl: "10",
              ncgsnlry:"101",
              ncgsnlgg: "11",
              ccgsnl: "12",
              zgsnl: "13",
              xjfwzz: "有",
              khfwzzrs: "30",
              jdjdnl: "30",
              yjssnl: "30",
              xjkhya: "√",
              khwzk: "有",
              trsqzsl: "10",
            },
        ]
    };
},

methods: {
    setColSpan() {      
      let tabHeader = document.getElementsByClassName("el-table__header");
      let row0 = tabHeader[0].rows[0];
      row0.cells[8].rowSpan = 3;
      row0.cells[9].rowSpan = 3;
      row0.cells[10].rowSpan = 3;
      let row1 = tabHeader[0].rows[1];
      row1.cells[0].rowSpan = 2; //数量
      row1.cells[1].rowSpan = 2;
      row1.cells[2].rowSpan = 2;
      row1.cells[3].rowSpan = 2;
      row1.cells[4].rowSpan = 2;
      row1.cells[5].rowSpan = 2;
      row1.cells[6].rowSpan = 2;
      row1.cells[7].rowSpan = 2;
      row1.cells[8].rowSpan = 2;
      row1.cells[10].rowSpan = 2;
      row1.cells[11].rowSpan = 2;
      row1.cells[12].rowSpan = 2;
      row1.cells[13].rowSpan = 2;
      let row2 = tabHeader[0].rows[2];
      row2.cells[0].style.display = "none";
      row2.cells[1].style.display = "none";
      row2.cells[2].style.display = "none";
      row2.cells[3].style.display = "none";
      row2.cells[4].style.display = "none";
      row2.cells[5].style.display = "none";
      row2.cells[6].style.display = "none";
      row2.cells[7].style.display = "none";
      row2.cells[8].style.display = "none";
      row2.cells[11].style.display = "none";
      row2.cells[12].style.display = "none";
      row2.cells[13].style.display = "none";
      row2.cells[14].style.display = "none";
    },
  },
  created() {
    this.$nextTick(function () {
      this.setColSpan();
    });
  },