element ui表格相同內容自動合並

  一開始覺得合並單元格很困難，什么鬼，后來仔細查看api,發現是可以實現的，特此記錄下，直接看代碼，

項目需求是第一列和第二列還有第16列需要相同內容進行合並，所以判斷條件是不同的；

實現后效果如下：

 

 

<el-table
  :data="tableDataOne"
  style="width: 100%"
  :span-method="objectOneMethod">

</el-table>

methods:{　　　

let spanOneArr = [],
      spanTwoArr = [],
      concatOne = 0,
      concatTwo = 0;
  tableData.forEach((item,index)=>{
    if(index === 0){
      spanOneArr.push(1);
      spanTwoArr.push(1);
    }else{
      if(item.topic === tableData[index - 1].topic){ //第一列需合並相同內容的判斷條件
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      }else{
        spanOneArr.push(1);
        concatOne = index;
      };
      if(item.name === tableData[index - 1].name){//第二列和第16列需合並相同內容的判斷條件

        spanTwoArr[concatTwo] += 1;
        spanTwoArr.push(0);
      }else{
        spanTwoArr.push(1);
        concatTwo = index;
      };
    }
  });
  return  {
    one: spanOneArr,
    two: spanTwoArr
  }
},

objectOneMethod({ row, column, rowIndex, columnIndex }) {
  if(columnIndex === 0 ) {
    const _row = (this.setTable(this.tableDataOne).one)[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    };
  }
  if(columnIndex === 1 || columnIndex === 15) {
    const _row = (this.setTable(this.tableDataOne).two)[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    };
  }
},

}；
希望能幫到有需要的童鞋們；