el-tabel合并列、合并行

效果：

首先分析该表格，有合并列，也有合并行后端返回数据结构：

   tyyyData:[
      {
      "productType": "TOTAL",
      "productTypeDesc": "全量订单",
      "haveTerminal": null,
      "totalOrderCount": 0,
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    },
    {
      "productType": "SINGLE_HAVE",
      "productTypeDesc": "单产品",
      "haveTerminal": "有终端",
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    },
    {
      "productType": "SINGLE_NO",
      "productTypeDesc": "单产品",
      "haveTerminal": "无终端",
      "totalOrderCount": 0,
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    },
    {
      "productType": "TYING_HAVE",
      "productTypeDesc": "宽带搭售",
      "haveTerminal": "有终端",
      "totalOrderCount": 0,
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    },
    {
      "productType": "TYING_NO",
      "productTypeDesc": "宽带搭售无终端",
      "haveTerminal": "无终端",
      "totalOrderCount": 0,
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    },
    {
      "productType": "INCORPORATED",
      "productTypeDesc": "视频收编",
      "haveTerminal": null,
      "totalOrderCount": 0,
      "increaseOrderCount": 0,
      "increaseRate": "0",
      "nanoTubeCount": 0,
      "nanoTubeRate": "0",
      "uninstallCount": 0,
      "uninstallTotalCount": 0,
      "uninstallRate": "0"
    }
      ],

在el-table里面加一个 :span-method="cellMerge" 

   <el-table  :span-method="cellMerge" :key="tableKey" v-loading="tyyyLoading" :data="tyyyData" border :header-cell-style="rowClass" :cell-style="cellStyle">
          <el-table-column  v-for="(item, index) in tyyyTableList" :key="index"  align="center" :label="item.label">
            <template slot-scope="scope">
                <span  :title="scope.row[`${item.prop}`]"
                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{
                    scope.row[item.prop]
                  }}</span>
            </template>
          </el-table-column>
        </el-table>

表格和对应字段（前端）

  tyyyTableList:[
      {
          prop: "productTypeDesc",
          label: "",
          isExit: false,
          align: "center",
          width: "100",
          fixed: true
        },
        {
          prop: "haveTerminal",
          label: "",
          isExit: false,
          align: "center",
          width: "80",
          fixed: true
        },
      {
          prop: "totalOrderCount",
          label: "装机订单总数(在网)",
          isExit: false,
          align: "center",
          width: "120",
          fixed: true
        },
        {
          prop: "increaseOrderCount",
          label: "新增装机订单数(在网)",
          isExit: false,
          align: "center",
          width: "150"
        },
        {
          prop: "increaseRate",
          label: "新增环比",
          isExit: false,
          align: "center",
          minWidth: "150"
        },
        {
          prop: "nanoTubeCount",
          label: "纳管数",
          isExit: false,
          align: "center",
          width: "100"
        },
        {
          prop: "nanoTubeRate",
          label: "纳管率",
          isExit: false,
          align: "center",
          width: "100"
        },
        {
          prop: "uninstallCount",
          label: "拆机订单总数",
          isExit: false,
          align: "center",
          minWidth: "140"
        },
        {
          prop: "uninstallTotalCount",
          label: "新增拆机订单数",
          flag: true,
          isExit: false,
          align: "center",
          minWidth: "140"
        },
        {
          prop: "uninstallRate",
          label: "拆机环比",
          isExit: false,
          align: "center",
          minWidth: "120"
        },
      ],

cell-methods里写的方法：

   // 获取相同名称的个数 tableData: 表格的数据, productTypeDesc: 确定相同的参数
    cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {   
        const _row = this.spanArr[rowIndex]
        console.log('有拿到row吗',_row)
        const _col = (rowIndex == 0 || rowIndex == 5) ? 2 : 1 // 我这里是第一行和最后一行，是固定的，也就是行下标为0和5的，那么就合并第2列

        
        return {
          rowspan: _row,
          colspan: _col,
        }
// 这里写的rowspan 和colspan也就是合并的行和列的数量

      }
    
    },
    // 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
    getSpanArr(data) {
      console.log('有拿到data吗',data)
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr = []
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].productTypeDesc === data[i - 1].productTypeDesc) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },