element ui table中highlight高亮显示,hover时如何不移除颜色

问题是这样的，数据中每行有不同的状态判断是否相等，如果状态不同就需要把这行标红色，
看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>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (