element ui + vue 表格多选后选中行高亮/变色

element ui官网的table多选后的样式如下图
​​​​​​​​
我们想要的效果如下图（选中的是有底色/高亮的)

用到的主要知识点如下图(2张）

为了方便后期修改颜色，我们把样式写在了公共样式中–common.less

 //table选中高亮
  .el-table .slecleRowColor {
    background: #EAF4FF !important;
  }
  //改变element ui自带的hover高亮颜色
  .el-table tbody tr:hover > td {
    background-color: #EAF4FF !important;
  }

在界面组件中—index.vue
主要代码 :row-class-name="rowClass" ,@selection-change="handleSelectionChange"
html：

  <el-table ref="inspectTable"
 :data="inspectTable.data"
  size="mini"
  :row-class-name="rowClass"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"
    width="55"></el-table-column>
  <el-table-column v-for="item in inspectTable.columns"
    :key="item[inspectTable.key]"
    :show-overflow-tooltip="true"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
    :sortable="item.sortable"
    :formatter="item.formatter"></el-table-column>
  <el-table-column label="操作"
    width="150px">
    <template slot-scope="scope">
      <el-button size="mini"
        type="text"
        v-if="judge('inspection-list:update')"
        @click="btnEvent('edit',scope.row)">编辑</el-button>
      <el-button size="mini"
        type="text"
        v-if="judge('inspection-list:delete')"
        @click="btnEvent('deleteInfo',scope.row)">删除</el-button>
      <el-button size="mini"
        type="text"
        @click="btnEvent('detail',scope.row)">详情</el-button>
    </template>
  </el-table-column>
</el-table>

script：

<script>
export default {
  data () {
    return {
      selectRow: [],//选中的行
      selectData: [],//选中的数据
      }，
  watch: {
  //监听多选的选择状态、数据
    selectData (data) {
      this.selectRow = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(this.inspectTable.data.indexOf(item))
        })
      }
    }
  },
  //勾选数据行的 Checkbox 时触发的事件
    rowClass ({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return 'slecleRowColor ';
      }
    },
    // 选中的信息
    handleSelectionChange (val) {
      this.selectData = val
    },
}

style:
（这个路径根据自己文件的来）

<style lang="less">
  @import '../../assets/css/Common.less';
</style>

注意：
watch中的 this.selectRow.push(this.inspectTable.data.indexOf(item))中的inspectTable.data是根据html部分的 :data="inspectTable.data"来写
如果不对应会报错，如下图：