前言:刚毕业,一切都在慢慢学习的过程中,记录上班遇到的问题,随缘发布。
今日问题:自定义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不可以,请问有大佬可以解惑一下吗?