Vue——树行结构的el-table点击行高亮的问题

问题不大但很隐晦。这么小个问题最终花了几天才搞定，好几次想放弃，就一个感觉真的恶心。

场景一：直接修改el-table的样式。
修改插件的样式必须时全局的，但又不能影像到其他地方的el-table所以在前面加了父级div的classname.【程序员不需要你好牛逼但一定要规范，这样代码才容易维护，之前在大厂里经理交给我的】

.parent-box .el-table__body tr.current-row>td {//高亮点击的行
  background: rgb(77, 195, 255, 0.5) !important;
}
.parent-box .el-table__body tr:hover>td{//鼠标滑过时高亮行
  background: rgb(77, 195, 255, 0.2);
}

场景二：在点击后如果去页面没有元素被刷新，场景一是OK的。但如果有元素刷新（比如：显示隐藏某个div）会出现被点击高亮的行有马上恢复了原来的样子。
大概原因是：重新渲染列表，current-change发生了改变，冲原本选择的row，变成不在选择任何一行，导致问题很难排查。

网上看了很多人的都没说明白怎么处理，所以记录一下。

几个地方：

1. @row-click方法获取被点击行的id[这个id是自己的数据里面的，根据自己的数据换成自己的唯一标识就行]。
2. :row-style在渲染每行的时候触发后面指定的方法。
3. rowClassRender({row}){}方法的参数是 "{row}"话括弧不能少，否者无效。
4. 不用setCurrentRow是因为setCurrentRow对于树状的table无效。

颜色渐变+点击高亮

rowClassRender({row, rowIndex}) {
  if (rowIndex%2 === 1) {
    if (row.id==this.currentRowId) {
      return { "background-color": "rgb(77, 195, 255, 0.5)" };
    }
    return { "background-color": "rgb(0, 0, 0, 0.5)" };
  }else{
    if (row.id==this.currentRowId) {
      return { "background-color": "rgb(77, 195, 255, 0.5)" };
    }
    return '';
  }
}