element中el-table表头通过header-row-style设置样式

本文主要介绍了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修改列颜色》