el-table选中与hover样式

<template>
  <div>
    <el-table
     ref="multipleTable"
      :data="tableData"
      style="width: 100%"
       :row-class-name="setRowClass"
      @row-click="clickRow"
      @selection-change="selected"
      border
    >
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期" width="220"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="年龄" width="240"> </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: "",
  data() {
    return {
      currentId: null,
      ids: [], // 把选择到的当前行的id存到数组中
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          id: "1",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          id: "2",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          id: "3",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "4",
        },
      ],
    };
  },
  methods: {
 selected(row) {
   this.ids = row;
      // console.log(row);//点击的那行数据
    },
 
 
 
  // 点击整行选中
    clickRow(row){
      this.$refs.multipleTable.toggleRowSelection(row)
      console.log("切换整行状态");
    },
   
   setRowClass({ row }) {
    //  将原来的customNo改成id,这个与tableData中的id有关
    // this.ids = selection.map((item) => item.id);
      const checkIdList = this.ids.map((item) => item.id);
      if (checkIdList.includes(row.id)) {
        return "selected"
      }
    },
  // 样式 
   setRowStyle({ row }) {
    //  将原来的customNo改成id,这个与tableData中的id有关
    //  this.ids = selection.map((item) => item.id);
      const checkIdList = this.ids.map((item) => item.id);
      if (checkIdList.includes(row.id)) {
        return "selected"
      }
    }
  },
};


</script>
<style scoped>
/* 修改鼠标经过表格的颜色 */
 ::v-deep.el-table tbody tr:hover > td {
    background-color: #c0c4cc !important;
    color: #ffffff;
    
  /* hover时隐藏*/ 
 background-color: transparent !important;
 }
 


/* 修改后的 选中时hover样式不会覆盖选中的*/
/*   .el-table tbody tr.el-table__row:hover > td {
  background: #c0c4cc !important;
}
.el-table tbody tr.el-table__row.selected > td {
  background: #e6effb !important;
}
 .el-table tbody tr.el-table__row.selected:hover > td {
  background: #e6effb !important;
}
*/
</style>