本文主要介绍了element中el-table表头通过header-row-style设置样式
一、header-row-style官网说明
有些时候需要给element-ui表头设置不同样式，比如居中、背景色、字体大小等等，这时就可以用到本文要说的属性header-row-style。官网说明如下所示：
二、设置全部表头
以下代码全都借助element-ui官网的在线运行调试。可以按下图找到一个在线运行，然后修改代码。
2.1、方式一
<el-table :header-cell-style="{'text-align': 'center'}" />
效果图：
如上图，标题居中对齐
2.2、方式二
<template>
<el-table :header-cell-style="tableHeaderStyle" />
</template>
<script>
export default {
methods: {
tableHeaderStyle ({
row, column, rowIndex, columnIndex}) {
return 'text-align: center;'
}
}
}
</script>
三、设置某个表头
<template>
<el-table :header-cell-style="tableHeaderStyle" />
</template>
<script>
export default {
methods: {
// 设置表头的颜色
tableHeaderStyle({
row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && columnIndex === 0) {
return 'background-color: #afccfd; color:#000000;'; //蓝色
} else if (rowIndex === 0 && columnIndex === 1) {
return 'background-color: #c0e33c; color:#000000;';//绿色
} else if (rowIndex === 0 && columnIndex === 2) {
return 'background-color: #fbc57b; color:#000000;';//橙色
} else {
return 'color:#000000; background: #ffffff;';
}
}
}
}
</script>
效果图如下：
关于el-table修改颜色更多文章可以参考另一篇博文《vue修改el-table表格标题颜色、vue修改列颜色、el-table修改列颜色》