Vue Element-UI Table点击某一行，将该行背景色改变 高亮点击的行

想要实现一个点击一行，改行的背景色改变，高亮，如下图所示

 1、先开启element的高亮选项

<el-table
   :data="page_datas"
    border
    stripe
    highlight-current-row  # 开启element table 行高亮选项
    style="width: 100%">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column prop="create_user.real_name" label="创建人"></el-table-column>
    <el-table-column prop="create_user.mobile" label="落箱电话" width="110" align="center"></el-table-column>
    <el-table-column prop="reservation_no" label="预约号" width="110"></el-table-column>
    <el-table-column prop="reservation_id" label="预约号条码" width="110"></el-table-column>
    <el-table-column prop="pier.pier_name" label="起始地"></el-table-column>
</el-table>

2、设置全局的高亮样式

<style>
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
  background-color: #f19944 !important;
  /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
}
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f19944;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>

这样就可以了。