element表格实现单元格合并功能

element表格实现单元格合并功能

参考链接：https://www.cnblogs.com/fmixue/p/9469296.html

直接看参考链接的案例吧，那位博主写的比较清楚
实现效果：

数据格式:

html内容：建议直接看官网格式
<el-table
                  :data="faultList"
                  :row-class-name="tableRowClassName"
                  :span-method="objectSpanMethod"
                  :row-style="objectRowStyle"
                  :header-row-style="headerStyle"
                  height="95%"
                  max-height="95%"
                  border
                  style="width: 100%; margin-top: 20px;border:1px solid red;">
                  <el-table-column
                    prop="report_date"
                    label="时间"
                    width="140">
                  </el-table-column>
    </<el-table>
data里定义变量：
 data(){
    return {
        faultList:[],//表格数据 
        spanArr1: [],//表格中日期合并处理
        spanArr2: [],//表格中部件合并处理
    }
  },
  methods:{

let data= res.data.data//后台返回的数据体，看上面的图
          //参考代码:https://www.cnblogs.com/fmixue/p/9469296.html
          if(data.faultList.length > 0){
              this.faultList = data.faultList
          
              let contactDot1 = 0,//表格中日期合并处理
                  contactDot2 = 0//表格中部件合并处理

              this.faultList.forEach( (item,index) => {
                
                if(index == 0){
                    this.spanArr1.push(1)
                    this.spanArr2.push(1)
                }else{
                  //日期相同
                    if(item.report_date == this.faultList[index-1].report_date){
                        this.spanArr1[contactDot1] += 1
                        this.spanArr1.push(0)
                    }else{
                        contactDot1 = index
                        this.spanArr1.push(1)
                    }
                    //部件名相同
                    if(item.componentName == this.faultList[index-1].componentName){
                        this.spanArr2[contactDot2] += 1
                        this.spanArr2.push(0)
                    }else{
                        contactDot2 = index
                        this.spanArr2.push(1)
                    }
                }
            })
                     
         }else{

         }
           },
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {//对表格合并方法
      
        if (columnIndex == 0) {//第一列的数据合并
           if(this.spanArr1[rowIndex]){
                return {
                    rowspan:this.spanArr1[rowIndex],
                    colspan:1
                }
            }else{
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        }
        if(columnIndex == 1){//第二列的数据处理
            if(this.spanArr2[rowIndex]){
                return {
                    rowspan:this.spanArr2[rowIndex],
                    colspan:1
                }
            }else{
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        }
      },