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"来写 如果不对应会报错，如下图：