el-table dynamically merges cells and adds color to a row

Although the picture above is ugly, this website is indeed used by people.

Requirement
1. Dynamically merge the columns of a row into two or three rows.
2. Add color to the number of merged lines

Add the background color
row-class-name attribute to a certain row, set a fixed className for the row, function({ row, rowIndex })
span-method attribute merges the calculation method of the row or column, and then return the function function({ row , column, rowIndex, columnIndex })
The main methods are objectSpanMethod() and rowStyle()

the code

<template>
  <div>
      <el-table id="resultTable"
                v-loading="isLoading"
                :data="content"
                style="width: 100%"
                class="bx-photo-table"
                :border="true"
                :span-method="objectSpanMethod"
                :row-class-name="rowStyle">
        <el-table-column fixed="left"
                         show-overflow-tooltip
                         type="selection"
                         width="55"></el-table-column>
        <el-table-column show-overflow-tooltip
                         prop="deviceInfo.name"
                        label="label"
                         width="125"></el-table-column>
        <el-table-column prop="deviceInfo.sn"
                         label="label2"
                         width="130"
                         show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right"
                         width="120px"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="text">详情</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
// 给某一行添加背景色class
    rowStyle({
       
        row, rowIndex }) {
      
      
    // 如果当前行有添加的className，就添加背景色
      if (row.rowColor === 'blueRowbg') {
      
      
        return 'blueRowbg'
      } else {
      
      
        return ''
      }
    },
    reachData() {
      
      
    //创建一个存放需要合并行数的数组
      this.spanArr = [1]
      let list = JSON.parse(JSON.stringify(this.content))
      if (list.length) {
      
      
        list.forEach((row, i) => {
      
      
          row.lastRecordSynctime = 0
          row.rowColor = ''
        })
      }
      let pos = 0
      list.reduce((old, cur, i) => {
      
      
        // old 上一个元素  cur 当前元素  i 索引
        if (i === 0) {
      
      
          pos = 0
        } else {
      
      
        // 如果两条数据的lastRecordSynctime相等就把他们合并
          let oneStr = cur.lastRecordSynctime 
          let twoStr = old.lastRecordSynctime 
          if (oneStr === twoStr) {
      
      
           cur.rowColor = 'blueRowbg'
            old.rowColor = 'blueRowbg'
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
      
      
            this.spanArr.push(1)
            pos = i
          }
        }
        return cur
      }, {
      
      })
      this.content = list
      // 洗好的列表数据
      console.log('======列表数据======', this.content)
      //按照element地方法创建的数组spanArr
      console.log('======spanArr======', this.spanArr)
    },
    // 调用elment提供的方法合并单元格
    objectSpanMethod({
       
        row, column, rowIndex, columnIndex }) {
      
      
    //设置第几列合并columnIndex =1是第一列
      if (5 < columnIndex && columnIndex < 12 || columnIndex === 16 || columnIndex === 0) {
      
      
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
      
      
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },
</script>
<style>
.blueRowbg{
      
      
background:'#488aff'
}

/***加上这个可以去掉table的hover效果***/
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
      
      
  background-color: #488aff !important;
}
</style>