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
            };
          }
        }
      },