给element-ui中el-table选中行增加背景颜色

注：element-ui版本：^2.15.4

一、需求：表单行选中时添加背景颜色，实现效果如下图

二、使用到的关键属性：

三、实现代码：

<el-table
    ref="multipleTable"
    :row-class-name="setRowClass"
    :data="userData"
    @selection-change="handleSelectionChange"
    .....
  >
</el-table>

export default {
  data() {
    return {
       userData: [],
       selectedRow: [],
       multipleSelection: []
    }
  },
  methods:{
      // userId 使用唯一值进行比对
      setRowClass({ row }) {
          if (this.selectedRow.includes(row.userId)) {
            return 'selected-row-color'
          }
          return ''
        },
        handleSelectionChange(row) {
          this.selectedRow = []
          if (row.length) {
            row.forEach(item => {
              this.selectedRow.push(item.userId)
            })
          }
          this.multipleSelection = row
        }
  }
}

// 更改el-table全局的css
// 设置选中行的背景颜色
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
// Tags1 --> 这一行样式针对的是操作列中没有进行【fixed】的表格，覆盖hover-row的颜色，实现选中行即添加背景色
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
  background-color: #b8dcff !important;
}
// Tabs2 --> 这两行样式针对的是操作列中存在进行【fixed】固定的表格，强制覆盖hover-row的颜色
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
  background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
  background-color: #b8dcff !important;
}

四、总结实现过程中遇到的问题

Q1. 操作栏中不存在固定列时，选中时增加背景颜色，此时存在hover-row的背景颜色冲突，所以需要鼠标移开后才会显示添加的背景颜色，如下图

A1：添加如上Tags1的css样式代码，进行覆盖。需要注意的是：选中添加背景色的那行，不存在有鼠标经过行的颜色效果了

Q2. 操作栏中存在固定列，选中是可以正常添加背景颜色的，但经过Q1解决后，（选中添加背景色的那行，不存在有鼠标经过行的颜色效果了），所以为保持一致，需要去除鼠标经过选中行不显示hover的颜色 A2：添加Tag2代码