table表格的合并

如上图，实现单元格合并功能，不多说，直接上代码

一，添加    :span-method="objectSpanMethod"

<el-table
     :key="timer1"
     :data="tableData"
     :span-method="objectSpanMethod"
     style="width: 100%"
     cell-class-name="cellStyle"
     highlight-current-row
 >

二，objectSpanMethod方法计算合并

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) { //第一列 下标为0
          if (rowIndex === 0) {  //第一列下的第一行 下标为0  
            return {
              rowspan: 4,  //向下合并4个
              colspan: 1
            };
          }else{          //其他的不变
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }else if(columnIndex === 4){ //第四列也需要合并 同理
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }else if(columnIndex === 5){  //第五列也需要合并 同理
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }
      },

 

第二种情况：每一列都有两个合并行  方法类似，无非每一列多了一个行的合并

 

objectSpanMethod_two({ row, column, rowIndex, columnIndex }){
        if (columnIndex === 0) { //第一列
          if (rowIndex === 0) { //第一行 需要合并4个单元格
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){ //第四行，需要合并下面四个单元格
            return {
              rowspan: 4,
              colspan: 1
            };
          }else {             //其他不变，这个一定不能漏了
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }else if(columnIndex === 4){
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }else if(columnIndex === 5){
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }
      },