收藏

uniapp微信、QQ分享

blog.csdn.net/qq_41732757…

elementui表格行合并

blog.csdn.net/u013558749/…

我们需要将返回的数据按照该字段（operate_number）进行处理。—— 将相同operate_number的信息的索引进行对应存储。

getOrderNumber() {
    let OrderObj = {}
    this.tableData.forEach((element, index) => {
        element.rowIndex = index
        if (OrderObj[element.operate_number]) {
          OrderObj[element.operate_number].push(index)
        } else {
          OrderObj[element.operate_number] = []
          OrderObj[element.operate_number].push(index)
        }
    })

    // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
    for (let k in OrderObj) {
      if (OrderObj[k].length > 1) {
        this.OrderIndexArr.push(OrderObj[k])
      }
    }
  },

然后根据我们页面展示需要， 控制哪一些列上的数据是需要进行展示的。

  // 合并单元格
  objectSpanMethod({row,column,rowIndex,columnIndex}) {
    if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
      for (let i = 0; i < this.OrderIndexArr.length; i++) {
        let element = this.OrderIndexArr[i]
        for (let j = 0; j < element.length; j++) {
          let item = element[j]
          if (rowIndex == item) {
            if (j == 0) {
              return {
                rowspan: element.length,
                colspan: 1
              }
            } else if (j != 0) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        }
      }
    }
  },

合并后的一行数据，滑过的时候效果就不对了，接下来我们就来解决一下这个问题，让效果能达到如下图所示：

关键词: cell-mouse-enter cell-mouse-leave cell-class-name

通过触发鼠标划入，划出的时候单元格的样式：

// 单元格样式
tableRowClassName({row,rowIndex}) {
    let arr = this.hoverOrderArr
    for (let i = 0; i < arr.length; i++) {
       if (rowIndex == arr[i]) {
          return 'hovered-row'
       }
    }
 },
// 鼠标划入，划出效果
cellMouseEnter(row, column, cell, event) {
   this.rowIndex = row.rowIndex;
   this.hoverOrderArr = [];
   this.OrderIndexArr.forEach(element => {
      if (element.indexOf(this.rowIndex) >= 0) {
         this.hoverOrderArr = element
      }
   })
},
cellMouseLeave(row, column, cell, event) {
   this.rowIndex = '-1'
   this.hoverOrderArr = [];
}