VUE element-ui 之table表格复选框勾选行背景修改（选中状态背景色修改）

需求：鼠标悬停浅色背景，勾选复选框选中行深色背景
步骤：

<el-table
          id="excel_table"
          ref="table"
          class="order"
          border
          height="80vh"
          :summary-method="getSummaries"
          :show-summary="true"
          :data="Data"
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#333333'}"
          :row-style="rowClass" //行样式方法
          @sort-change="sortChange"
          @selection-change="selectionChangeHandler"
        >

data() {
    return{
        selectRow: [], // 存储选中row的唯一标识，如id
          multipleSelection: []// 存储选中的row
    }
},
watch: {
    multipleSelection(data) { // 监听选中状态
      this.selectRow = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(item.totalNum)
        })
      }
    }
  }

methods: {
    // 复选框勾选
    selectionChangeHandler(val) {
      console.log(val)
      if (val) {
        this.selections = val
        this.multipleSelection = val //将当前勾选的数据存储
        this.parameter = { price: val[0].price, saleOrderNum: val[0].sale_order_num, windowType: val[0].window_type }
      } else { this.selections = [] }
    },
    // 对所选行进行样式设置
    rowClass({ row, rowIndex }) {
      console.log(`---`, row)
      if (this.selectRow.includes(row.totalNum)) {
        return { 'background-color': '#9FBBFF' }
      }
    },
}

<style scoped>
  /deep/.order .el-table__header-wrapper  .el-checkbox{
    display:none
  }
/* 鼠标悬停背景色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
   background: #D3DEF9;
 }
</style>

看效果：

亲测有效，单选全选都可以实现。