一、设置全部表头统一样式
方式一：内联对象绑定（推荐）
<el-table :data="tableList" style="width: 100%":header-cell-style="{ background: '#FFFFFF', color: '#000000' }">
</el-table>
方式二：方法绑定
<el-table v-loading="listLoading"style="width: 100%":data="list"@sort-change="changeSort":header-cell-style="tableHeaderColor">
</el-table><script>
export default {methods: {tableHeaderColor({ row, column, rowIndex, columnIndex }) {return 'background-color: #ffffff; color: #000000;';}}
}
</script>
二、设置单个表头的自定义颜色
<el-table v-loading="listLoading"style="width: 100%":data="list"@sort-change="changeSort":header-cell-style="tableHeaderColor">
</el-table><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 'background-color: #ffffff; color: #000000;'; // 默认样式}}}
}
</script>
