1.el-table自定义表头颜色header-row-style不生效
解决办法就是换成header-cell-style
<el-table :data="tableData" @row-click="showRowDetail" style="width: 100%"
:header-cell-style="{ background: '#093376', color: '#fff' }" :row-class-name="tableRowClassName">
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="pos" label="位置">
</el-table-column>
<el-table-column prop="time" label="时间">
</el-table-column>
<el-table-column prop="fun" label="识别项">
</el-table-column>
<el-table-column prop="res" label="结果">
</el-table-column>
</el-table>
2.el-table隔行换色row-class-name不生效
js部分
tableRowClassName({ row, rowIndex }) {
console.log(rowIndex, 'rowIndex');
if (rowIndex % 2 == 0) {
return 'even-row';
} else {
return 'odd-row';
}
},
css部分
1.要加深度选择器
2.要加td
3.要加!important
/deep/ .el-table .even-row td {
background-color: #082959 !important;
color: #47e2ff;
}
/deep/ .el-table .odd-row td {
background-color: #051f51 !important;
color: #47e2ff;
}