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

本文主要是介绍el-table表头修改文字或者背景颜色，通过header-row-style设置样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

方式一

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

这篇关于el-table表头修改文字或者背景颜色，通过header-row-style设置样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---