element-ui Table 组件表头单元格设置不同背景颜色

html

 <el-table :header-cell-style="setTitle" border :data="tableData" style="width: 100%">
                    <el-table-column align="center" v-for="item, index in titleData" :key="index" :prop="item.columnName"
                        :label="item.showName">
                    </el-table-column>
                </el-table>

:header-cell-style属性用来设置表头在js中定义方法

js

/**设置表头背景颜色 */
        setTitle({ rowIndex, columnIndex }) {
            if (columnIndex == 0) {
                return "background:pink;";
            } else if (columnIndex == 1) {
                return 'background:skyblue;'
            }
        }

rowIndex : 行下标

columnIndex :列下标

通过判断列下标给表格表头添加不同的样式效果；