[JavaScript知识库]el-table 动态合并单元格和给某一行添加颜色

上图片虽然巨丑，单这个网站确实有人用。

需求
1、动态将某一行的第几列，向下合并两行或者三行。
2、给合并的行数添加颜色

给某一行加背景色
row-class-name属性，给行设置一个固定的className，function({ row, rowIndex })
span-method 属性 合并行或列的计算方法，接一个回掉函数function({ row, column, rowIndex, columnIndex })
主要的方法是objectSpanMethod()和rowStyle()

代码

<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>