element ui表格合并单元格

element ui表格合并单元格

效果：下面数据做了一下扁平化，主要是这里的数据结构不太符合，如果你的数据结构符合遍历可以不用这一步，当然这里扁平化的时候增加了合并的行数rowspan 和 序号 itemIndex。如若没这一步注意自行计算合并行数和序号。

表格代码：

 <el-table border
          ref="multipleTable"
          :height="tableHeight"
          :data="tableData"
          :span-method="objectSpanMethod" 
        >
          <el-table-column prop="itemIndex" fixed label="序号" width="70">
          el-table-column>
          <el-table-column prop="itemName" label="事项名称" show-overflow-tooltip min-width="210">el-table-column>
          <el-table-column prop="itemCode" label="实施编码" show-overflow-tooltip width="210">el-table-column>
          <el-table-column prop="areaName" label="通办地区" show-overflow-tooltip width="100">el-table-column>
          <el-table-column prop="applyCount" label="申办量" show-overflow-tooltip width="90">el-table-column>
          <el-table-column prop="acceptCount" label="受理量" show-overflow-tooltip width="90">el-table-column>
          <el-table-column prop="acceptRate" label="受理率" show-overflow-tooltip width="90">el-table-column>
          <el-table-column prop="finishCount" label="办结量" show-overflow-tooltip width="90">el-table-column>
          <el-table-column prop="priorFinishCount" label="提前办结量" show-overflow-tooltip width="120">el-table-column>
          <el-table-column prop="priorFinishRate" label="提前办结率" show-overflow-tooltip width="120">el-table-column>
          <el-table-column prop="overtimeFinishCount" label="超时办结量" show-overflow-tooltip width="120">el-table-column>
          <el-table-column prop="overtimeNofinishCount" label="超时未办结量" show-overflow-tooltip width="130">el-table-column>
        el-table>

跨行方法：合并的主要用到下方这个方法，

//跨行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { 
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
          console.log( column, rowIndex); 
          if(row.rowSpan){ 
            let _rowspan = row.rowSpan;  
            return {
              rowspan: _rowspan,
              colspan: 1
            }
          }else{ 
            return  { 
              rowspan: 1,
              colspan: 0
              };
          } 
        }else{ 
          return  { 
              rowspan: 1,
              colspan: 1
              }
        }
    },

案例数据：

{
  "data": {
    "dataList": [
      {
        "itemName": "新个人事项（普通）~ylp ",
        "itemCode": "12334",
        "apprCommonBitemSdataSubVos": [
          {
            "areaCode": null,
            "areaName": null,
            "applyCount": 463,
            "acceptCount": 90,
            "finishCount": 54,
            "priorFinishCount": 52,
            "overtimeFinishCount": 1,
            "overtimeNofinishCount": 0,
            "acceptRate": 19.43844492440605,
            "priorFinishRate": 11.23110151187905
          },
          {
            "areaCode": "440200",
            "areaName": "韶关市",
            "applyCount": 3,
            "acceptCount": 0,
            "finishCount": 0,
            "priorFinishCount": 0,
            "overtimeFinishCount": 0,
            "overtimeNofinishCount": 0,
            "acceptRate": 0.0,
            "priorFinishRate": 0.0
          }
        ]
      },
      {
        "itemName": "测试企业事项zwd",
        "itemCode": "test2< ; οnlοad=confirm(1)> ;;//",
        "apprCommonBitemSdataSubVos": [
          {
            "areaCode": null,
            "areaName": null,
            "applyCount": 581,
            "acceptCount": 226,
            "finishCount": 74,
            "priorFinishCount": 67,
            "overtimeFinishCount": 5,
            "overtimeNofinishCount": 0,
            "acceptRate": 38.89845094664372,
            "priorFinishRate": 11.53184165232358
          }
        ]
      }
    ],
    "pageObj": {
      "pageRowNum": 10,
      "currPage": 1,
      "totalPage": 2,
      "totalRow": 12
    }
  }
}

数据扁平化方法：

 getArrList(dataList) {
      let arr = [];
      dataList.forEach((item,index) => {
        if(item.apprCommonBitemSdataSubVos.length > 0){
          item.apprCommonBitemSdataSubVos.forEach((value , i) => {
            let  listItem = {
            rowSpan : i == 0 ? item.apprCommonBitemSdataSubVos.length : '',
            itemName:item.itemName,
            itemCode:item.itemCode,
            itemIndex:index,
            ...value
            }
            arr.push(listItem);
          })
        }else{
          let  listItem = {
            itemName:item.itemName,
            itemCode:item.itemCode,
            apprCommonBitemSdataSubVos:[]
          }
          arr.push(listItem);
        }
      })
      return arr;
    },

数据扁平化后的结构：

{
	rowSpan : 2  ,//合并行数
	itemIndex : 1 ,//合并后序列号
    "itemName": "测试企业事项zwd",
     "itemCode": "test2< ; οnlοad=confirm(1)> ;;//",
     "apprCommonBitemSdataSubVos": [
      "areaCode": null,
      "areaName": null,
      "applyCount": 581,
      "acceptCount": 226,
      "finishCount": 74,
      "priorFinishCount": 67,
      "overtimeFinishCount": 5,
      "overtimeNofinishCount": 0,
      "acceptRate": 38.89845094664372,
      "priorFinishRate": 11.53184165232358
}