table 合并单元格内容

最近使用element ui做的一个表格,现在又加了一个新需求,就是要求可以合并单元格.

从后台拿到的数据格式如下:
data= [
    {
      "number": 4,
      "dataTypeName": "食品生产",
      "dataType": "1",
      "details": [
        {
          "wscCou": 3,
          "cou": 3,
          "scCou": 0,
          "abbreviation": "华泾"
        },
        {
          "wscCou": 1,
          "cou": 1,
          "scCou": 0,
          "abbreviation": "漕河泾"
        }
      ] 
    },
    {
      "number": 130,
      "dataTypeName": "药品零售",
      "dataType": "2",
      "details": [ 
        {
          "wscCou": 24,
          "cou": 24,
          "scCou": 0,
          "abbreviation": "枫林"
        },
        {
          "wscCou": 9,
          "cou": 9,
          "scCou": 0,
          "abbreviation": "斜土"
        },
        {
          "wscCou": 8,
          "cou": 8,
          "scCou": 0,
          "abbreviation": "康健"
        },
        {
          "wscCou": 8,
          "cou": 8,
          "scCou": 0,
          "abbreviation": "天平"
        } 
      ]
    } 
  ]

element ui table有合并单元格的功能,但是由于后台返回我的数据和文档不一致,所以我这要手动更改一下数据格式.
下面是我遍历修改数据格式的方法.

data.forEach((item,index)=>{
  if(item.details && item.details.length > 0){
       item.details.forEach(itemDetail=>{
           let obj = Object.assign({},itemDetail,{
               dataType : item.dataType,
               dataTypeName : item.dataTypeName,
               number : item.number,
           })
           this.tableData.push(obj);
       })
   }
})
console.log(this.tableData);

接着按照文档上面使用***span-method***进行合并

<el-table :data="tableData" border empty-text="暂无数据" :span-method="mergeTable">
   <el-table-column prop="dataTypeName" label="类型名称"></el-table-column>
   <el-table-column prop="number" label="证件总数量"></el-table-column>
   <el-table-column prop="abbreviation" label="所"></el-table-column>
   <el-table-column prop="wscCou" label="图片未上传数"></el-table-column>
   <el-table-column prop="scCou" label="图片上传数"></el-table-column>
   <el-table-column prop="cou" label="汇总数"></el-table-column>
 </el-table>

mergeTable({ row, column, rowIndex, columnIndex }){
    let arr = [];
    let pos = 0;
    for(let i = 0;i<this.tableData.length;i++){
        if(i === 0 ){
            arr.push(1);
            pos = 0
        }else{
            if(this.tableData[i].dataType === this.tableData[i-1].dataType){
                arr[pos] +=1;
                arr.push(0);
            }else{
                arr.push(1);
                pos = i;
            }
        }
    }
	//此处arr拿到的是相对应的行合并数,打印出来是[2,0,4,0,0,0],
	//比如第一元素为2，表示第一行应该向下合并2行（即第一行的rowspan为2），
	//第二个元素的rowspan为0，就让它“消失”。
	
	//接下来按照要求,我们,我们只合并第一列和第二列
    if (columnIndex === 0 || columnIndex ===, 1) {
        const _row = arr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
            rowspan: _row,
            colspan: _col
        }
    }
}