方式一
<el-table :header-cell-style="{'text-align': 'center'}" />
方式二
<template>
<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
methods: {
tableHeaderColor ({row, column, rowIndex, columnIndex}) {
return 'background: #F5F5F5; color:#000000;';
}
}
}
</script>
//修改表头背景颜色为灰色字体为黑色
如图
三、设置某个表头 (就是在第二点基础上加了判断)
<template>
<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
methods: {
// 设置表头的颜色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex);
if (rowIndex === 0 && columnIndex === 1) {
return 'background-color: #afccfd; color:#000000;'; //蓝色
} else if (rowIndex === 0 && columnIndex === 2) {
return 'background-color: #c0e33c; color:#000000;';//绿色
} else if (rowIndex === 0 && columnIndex === 3) {
return 'background-color: #fbc57b; color:#000000;';//橙色
} else {
return 'color:#000000; background: #ffffff;';
}
}
}
}
</script>