el-table表头修改文字或者背景颜色，通过header-row-style设置样式

大大。

于 2024-06-15 11:58:33 发布

阅读量1k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43923808/article/details/139699851

版权

方式一

<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>