elelment ui表格操作中的一栏高亮显示

我们的后台有一些这样的表格，点击某一栏进入该笔订单的详情页，之后再退出详情页的时候，有时候会不记得自己操作的是哪一条数据，为了解决这个体验问题，我借助了element ui表格的高亮事件

html代码 在table表格头上添加 :row-class-name="tableRowClassName"

<el-table :data="tableData" :border="false" :header-cell-style="getRowClass" :row-class-name="tableRowClassName">

js代码

 // 显示正在操作的那一条数据的状态
    tableRowClassName({ row, rowIndex }) {
        rowIndex = rowIndex+ (this.currentPage - 1) * 10
      if (rowIndex === this.colorHighLight) {
        return "warning-row";
      }
      return "";
    },

按钮的方法

    // 进入订单详情页面
    queryOrderDetail(index, row) {
      this.colorHighLight = index + (this.currentPage - 1) * 10
        this.$router.push({path:'/QueryDetail',query:{orderNo:row.orderNo,clientId:row.clientId}})
    },

css样式

.el-table .warning-row {
  background: oldlace;
}