element-ui 使用span-method表格合並后hover樣式的處理

在使用element表格合並后,發現鼠標只有移入第一個合並行時,合並的部分會高亮,移入其他行,不會高亮,這樣效果看起來不是很好.查看了文檔也沒有直接的解決方法,就通過現有的方法處理了一下,解決了hover的問題

 

通過檢查元素,可以看到每一個合並表格開始的第一行會多一個el-table-column--selection的類名,這個就是控制合並部分的樣式的,所以在鼠標移入其他合並行時,只要給這個元素加上背景顏色,就可以了.但是有一個問題就是這個需要動態添加,而且只能給當前的合並行添加,否則會影響到其他行

 

element提供了單元格的鼠標移入移出事件.通過這個控制元素的樣式添加

 

<el-table
  :data="tableData2"
  :row-class-name="isCell ? setCellClass : ''" // 動態添加樣式
  border
  @cell-mouse-enter="handleMouse" // 單元格移入事件
  @cell-mouse-leave="handleMouseLeve" // 單元格移出事件
  style="width: 100%"
  ref="checkTable"
  :span-method="objectSpanMethod">
  <el-table-column
    type="selection"
    reserve-selection
    width="55">
  </el-table-column>
  ...
</el-table>

// js method方法
// 處理表格數據
  handleTable () {
    let a = 0
    this.tableData2.forEach((item, index) => {
      // 給每一個數據加一個index,從1開始
      item.index = index + 1
      // 把滿足合並條件的行的索引保存起來
      if (item.index % 3 === 1) { // 表格合並條件
        a = item.index
      } else {
        item.col = a
      }
    })
  },

  // 單元格合並方法
  objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      if (rowIndex % 3 === 0) {
        return {
          rowspan: 3,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  },

  // 單元格移入事件
  handleMouse (row, column, cell, event) {
    if (row.index % 3 !== 1) { // 不符合合並行的條件手動加class
      // 只能給第一行加才有效, 把之前保存的第一行的索引存起來
      this.cellIndex = row.col
      this.isCell = true
    }
  },

  // 單元格移除事件
  handleMouseLeve () {
    this.isCell = false
  },

  // 設置行樣式
  setCellClass ({row, column, rowIndex, columnIndex}) {
    // 給當前鼠標移入的合並行第一行加上樣式名
    if (row.index === this.cellIndex) {
      return 'cellClass'
    }
  }

CSS樣式
.el-table {
  border: 1px solid rgba(227, 228, 231, 1);
  .cellClass {
    .el-table-column--selection {
      background-color: #ebf7ff;
    }
  }
}

 

 

處理之后,每一行移入都有高亮效果.方法對不同數據沒有通用型性,只是一種解決思路,對於不同的合並條件要不同處理.大致思想就是在移入不符合合並行的時候給合並的第一行添加樣式,必須要給第一行添加,第一行才有控制合並部分的元素.

如果有更簡單的處理方法,也希望留言告知