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

目的

此文是elementUI的table表格、非elementUI Plus

---

有些时候需要给element-ui表头设置不同样式，比如居中、背景色、字体大小等等，这时就可以用到本文要说的属性header-row-style。官网说明如下所示：

方法说明：表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

https://element.eleme.cn/#/zh-CN/component/table

---

设置全部表头

1、方式一

<el-table :header-cell-style="{'text-align': 'center'}" />

2、方式二

<template>
    <el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
    methods: {
        tableHeaderColor ({row, column, rowIndex, columnIndex}) {
            return 'text-align: center;'
        }
    }
}
</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>

本文为学习记录中，希望对各位看到文章的人有所帮助，同时希望大佬们多提提意见。