合并单元格想要的效果：

image.png

合并单元格需要三步：
1.合并相同的单元格 计算数量
2.使用span-method分发合并
3.鼠标移上去背景色效果实现

1.第一步此步骤一定要在数据拿到之后给再渲染

getOrderNumber () { // 合并内容相同的单元格
        let contactDot = 0
        const OrderIndexArr = []
        this.previewPlanList.forEach((item, index) => {
          if (index === 0) {
            OrderIndexArr.push(1)
          } else {
          // 注释：name  是对应体系,data 对应table绑定的数据源
            if (item.mergeId === this.previewPlanList[index - 1].mergeId) {
              OrderIndexArr[contactDot] += 1
              OrderIndexArr.push(0)
            } else {
              contactDot = index
              OrderIndexArr.push(1)
            }
          }
        })
        this.OrderIndexArr = OrderIndexArr
      }

2.第二步span-method

 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7 || columnIndex === 8) {
        if (this.OrderIndexArr[rowIndex]) {
          return {
            rowspan: this.OrderIndexArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },

3.鼠标移入背景色

  // 鼠标进入单元格
    handleMouseEnter (row, column, cell, event) {
      this.arr.forEach((item) => {
        if (row.mergeId === item.mergeId) {
          this.rowIndex = row.mergeId
        }
      })
    },
    // 给相应的rowIndex添加类名
    rowClassName ({ row, rowIndex }) {
      // console.log(row, rowIndex);
      let r = -1
      this.arr.forEach((item) => {
        if (this.rowIndex === row.mergeId) {
          r = rowIndex
        }
      })
      if (rowIndex === r) {
        return 'hovered-row'
      }
    },
    // 鼠标离开
    handleMouseLeave (row, column, cell, event) {
      this.rowIndex = -1
    }

注意：

image.png