elementui——表格的相同内容单元格合并

elementui——表格的相同内容单元格合并

说明:工作中遇到需要根据单元格某个属性合并,特此记录下
效果图:

效果图说明:红框所标识区域数据名称是相同的
表格数据格式(其中一条数据):

{
         dept:'车载',
         name1:'商业项目开案数',
         name2:'新开玻璃的模组',
         January:'3',
         February:'1',
         March:'1',
         April:'4',
         May:'2',
         June:'1',
         July:'3',
         August:'0',
         September:'0',
         October:'',
         November:'',
         December:'',
         Total:'15',
 },

判断条件:name1是否相同
重点代码:

思路:
定义一个空数组：[]
定义一个变量：0
遍历数据如果有相同数据 在空数组添加一个0(相同数据的起始位加1)，不相同在数据push 一个1（变量改成当前索引）

<el-table :data="firstForm.firstTableData" :span-method="firstSpanMethod" border style="width: 100%">
el-table>

说明:el-table绑定span-method事件

data: function () {
      return {
       spanArr:[]
	}
}
mounted: function () {
	let contactDot = 0;
    let spanArr = [];
    this.firstForm.firstTableData.forEach((item, index) => {
        if (index === 0) {
            console.log(spanArr)
            spanArr.push(1)
        } else {
            if (item.name1 === this.firstForm.firstTableData[index - 1].name1) {
                spanArr[contactDot] += 1;
                spanArr.push(0)
            } else {
                contactDot = index
                spanArr.push(1)
            }
        }
    })
    this.spanArr = spanArr;
},
 methods:  {
		firstSpanMethod:function ({ row, column, rowIndex, columnIndex }) {
              if (columnIndex === 1) {
                  if(this.spanArr[rowIndex]){
                      return {
                          rowspan:this.spanArr[rowIndex],
                          colspan:1
                      }
                  }else{
                      return {
                          rowspan: 0,
                          colspan: 0
                      }
                  }
              }
          }
	}

参考:
https://blog.csdn.net/u013809856/article/details/82858495?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control
原文中有几处错误,已经更改