element ui table中highlight高亮显示,hover时如何不移除颜色_class-name高亮列以后,鼠标经过行颜色就没有了,怎么解决?

问题是这样的，数据中每行有不同的状态判断是否相等，如果状态不同就需要把这行标红色，
看elementUI官方文档上的例子，使用:row-class-name属性来为 Table 中的某一行添加 class，可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
但是用完之后发现鼠标移动上去颜色消失，官方例子也是这样：

移上去之前：

移上去之后：

例：

<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.status1!=='1' || row.status2!=='1'|| row.status3!=='1') {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          status1:'1',
          status2:'1'，
          status3:'1'，
        }]
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

不需要.el-table .warning-row {background: oldlace;}
而是

<style scoped lang="less">
/deep/.el-table__body tr.warning-row>td {
  background-color: #ED989D!important;
}
</style>
1
2
3
4
5

这样鼠标移上去就不会颜色消失了（仅供参考并记录）