修改table表头背景用到的方法是ElementPlus自带的方法:header-cell-style
使用代码教程:
<el-table
:header-cell-style="tableHeaderColor"
border
:data="dataList"
>
<!-- header-cell-style修改table表头样式的,tableHeaderColor是写的回调函数,在回调函数里面修改表头样式 -->
</el-table>
回调函数使用:
// 根据data返回的每个单元格的数据判断,再修改单个表头单元格的颜色
function tableHeaderColor(data) {
if (data.column.property == "equip") {
return { background: "#a0cfff", color: "#000", textAlign: "center" };
} else if (
data.column.property == "value1" ||
data.column.property == "value2" ||
data.column.property == "name1"
) {
return { color: "#000", textAlign: "center" };
} else if (data.column.property == "value3") {
return { color: "#117ecc", textAlign: "center" };
}
}
修改效果图: