elementui中设置背景色、鼠标经过颜色冲突失效

前言:刚毕业,一切都在慢慢学习的过程中,记录上班遇到的问题,随缘发布。

今日问题:自定义elementui表格除表头的背景颜色后,原本设置的鼠标滑过某一行的颜色失效了。

//利用cell-style设置单元格背景颜色
<el-table :data="tableData" style="width: 100%" :cell-style="{backgroundColor: '#fefefe'}" :header-cell-style="{ backgroundColor: '#f2f2f2' }">

</el-table>

//鼠标经过,当前行的颜色
body tr:hover>td {
    background-color: #f2f2f2;
}

.el-table__body tr.current-row>td {
    background-color: #f2f2f2;
}

解决方法:设置除表头外的单元格背景颜色换为`:row-style`即可。

//利用cell-style设置单元格背景颜色
<el-table :data="tableData" style="width: 100%" :row-style="{backgroundColor: '#fefefe'}" :header-cell-style="{ backgroundColor: '#f2f2f2' }">

</el-table>

也不知道为什么使用cell-style不可以,请问有大佬可以解惑一下吗?