element table表格 头部设置样式

我们在使用element的表格的时候，经常需要我们自己重新设置表格的样式，个人表示加的最多的样式是给表格的第一行添加背景颜色，也就是头部标题添加上背景颜色。这里记录一下怎么实现。

在 table attributes 中有一个 header-cell-style 属性（表格单元格的style的回调方法，也可以使用一个固定的Object为所有的表头的单元格设置一样的style）

1.使用表格单元格的style的回调方法

<el-table :data="tableData" border :header-cell-style="getRowClass" :size="inputSize"></el-table>

// 给表单的表头添加背景颜色
        getRowClass ({row, column, rowIndex, columnIndex}) {
            if (rowIndex === 0) {
                return 'background: #F2F2F2 '
            } else {
                return ''
            }
        },

 

2.固定一个object为所有的表头的单元格设置一样的样式

<el-table :data="tableData" style="width: 100%" :header-cell-style='styleObj'></el-table>

data() {
   return {
        styleObj: {
        	'color':'red'
        },
    }
}